the gray buttons show on top of the gif image in mobile version also they are not responsive and show quite big. If you have any ideas i would highly appreaciate.
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox">
<img src="https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612" width="472px" height="423px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<button style="background-color:#CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;">Natural Silver</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 160px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px; ;">Night Blue</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Cardinal Red</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Coral Orange</button>
<br>
<p><b>Custom colors are available upon request.</b></p>
</div>
</div>
I think one way you could approach this is use flexbox. Based on your question, this should work for you:
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
Also, your buttons appear large likely because you have not adjusted their size in the media query. You will need to move the button styles out of your html and into your css file for the media query to work, since the inline css will override the referenced css file.
add position: absolute to tour class .imgbox
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: absolute; //ADD POSITION ABSOLUTE
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
I recommend you use one single class to your buttons, and dismiss the "style" attribute, to this way your code is more clean
Related
Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}
If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.
I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB
Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.
There must be a relative positioned parent for a child absolute block.
Add this to your css:
.dropdown {
position: relative;
}
And the positioning rules for .span1:
top: 0;
left: 0;
Also, some selectors contained extra rules and selectors.
.dropdown {
position: relative;
}
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 0;
left: 0;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
width: 192px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
position: relative;
top: -40px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<div class="search-pos">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.
This what happens:
Image / Imgur
As you can witness the button doesn't stay inside the bar itself like it should.
Like Dejan.S I did not get what is the problem.
Be carreful you put a top in a relative class .search-pos, it doesnt work !
I copy your code in CodePen and I think the problem comes from in a other class or maybe in your $search.pos class
https://codepen.io/auxb/pen/WNQjjyp?editors=1100
(I replace the font icon by a img but is the same)
Tell me if this code satisfied you !
For what i understand you need to change your css a little bit.
.search-pos {
display: block;
margin-left: auto;
width: 330px;
height:40px;
position: relative;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
height: 40px;
border-radius: 60px;
padding: 10px;
display:flex;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 4px;
}
.search-box:hover>.search-btn {
background: white;
padding: 10px;
}
.search-btn {
color: black;
float: center;
width: 30px;
height: 30px;
border-radius: 80%;
background: white;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 14px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
Let me know, if this solution helps you.
Try putting the code that handles the hover after the specified elements:
.search-box:hover>.search-txt
should come after
.search-txt
also
.search-box:hover>.search-btn
should come after
.search-btn
Hope that helps in ensuring the hover effects work as expected.
Also there is no CSS property such as float: center;
I'm trying to make a web app that can be used on mobile.
Below is my nav bar, atop all pages of my site.
The problem is with my hamburger .icon. It can be clicked to dropdown + hide again my nav bar when the screen is resized (ex. on an iPhone). However I seem to have sporadic non-responsiveness from it at times. Almost never works on Safari or iOS. Often doesn't work on Chrome. If I refresh the page a few times or revisit the page, it works, or doesn't, like flipping a coin.
$(document).ready(function() {
"use strict";
$(".icon").click(function(){
$(".topnav").toggleClass("responsive");
});
});
header {
width: 100%;
height: 51px;
position: relative;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
overflow: scroll;
text-align: left; }
header a {
top: 0; }
header a .logo {
width: auto;
height: 100%;
margin: 0px 10px;
position: relative;
color: #fff;
top: 0%;
font-weight: bold;
display: inline-block;
letter-spacing: 0px;
text-decoration: none;
text-align: left; }
header .topnav {
position: relative;
display: inline-block;
top: -2px;
left: 0;
color: #f2f2f2;
text-align: center;
padding: 14px 16px 14px 16px;
text-decoration: none;
font-size: 17px; }
header .icon {
visibility: hidden;
height: 31px;
width: 20px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
color: white;
text-align: center;
padding: 10px 25px;
text-decoration: none;
font-size: 25px;
z-index: 101;
cursor: pointer; }
.icon:hover, .topnav:hover {
background-color: #2C9AB7;
color: black; }
#media only screen and (max-width: 640px) {
.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%; }
header {
position: relative;
width: 100%;
left: 0;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
text-align: center;
overflow: visible;
align-content: flex-end; }
header a .logo {
display: block;
float: left;
font-weight: bold;
text-align: left;
margin: 0px 0px 0px 10px;
letter-spacing: normal; }
header .topnav {
display: none; }
header .icon {
display: inline-block;
text-align: center;
visibility: visible;
cursor: pointer; }
header .responsive {
display: flex;
position: relative;
clear: left;
flex-direction: column;
width: 70px;
top: 0;
left: 0;
background: #52BAD5;
text-align: left;
z-index: 101; } }
<header>
<a href="index.html" style="text-decoration: none">
<h1 class="logo">Notes</h1></a>
<a href="index.html" class="topnav">Home</a
><a class="topnav" href="AAA.html">AAA</a
><a class="topnav" href="BBB.html">BBB</a
><a class="topnav" href="CCC.html">CCC</a
><a class="topnav" href="DDD.html">DDD</a
><div class="icon" style="cursor: pointer">☰</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
My fiddle https://jsfiddle.net/TMori7/nn6ofm3s/
Thanks for the time.
What I need is for the page to be fully responsive and for some reason it isn't.
Mobile view
Here's the CSS and HTML. We are generating the page using React.
/* CSS Document */
/*
#font-face {
font-family: futura;
src: url("../fonts/Futura-Book.ttf");
}
#font-face {
font-family: futura italic;
src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
font-style: italic, oblique;
}
*/
/*--------------------------------ALL PAGES----------------------------------------*/
/*Body Style*/
* {
font-family: futura, verdana;
box-sizing: border-box;
}
h1 {
font-family: futura, verdana;
text-align: center;
}
body {
margin: auto;
min-width: 600px;
}
/*NAVIGATION STYLE*/
nav {
list-style-type: none;
padding: 0px;
overflow: hidden;
background-color: #4a486d;
margin: 0 auto;
min-width: 100px;
max-width: 950px;
text-align: center;
}
.navcontainer {
width: 100%;
background-color: #4a486d;
}
#search {
width: 20px;
height: 15px;
padding-right: 6px;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
nav a:visited {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
/*JUMBOTRON STYLE*/
.jumbotron {
text-align: center;
border-radius: 25px;
background-color: white;
padding: 0px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 10px;
clear: both;
}
/*CONTAINER STYLE*/
.container {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
}
/*BACKGROUND COLOR*/
#backcol {
background-color: #f5f4f9;
height: 100%;
}
/*LEFT LINKS STYLING*/
#sidenav {
list-style-type: none;
margin: 0;
padding: 5px;
padding-left: 10px;
width: 16%;
background-color: #f5f4f9;
position: absolute;
height: 55%;
overflow: auto;
clear: both;
text-align: left;
float: left;
border-radius: 3px;
}
li a {
display: block;
color: #1c1c1c;
padding: 8px 0 0px 25px;
text-decoration: none;
padding: 5px;
}
li a.active {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
background-color: #1c1c1c;
color: white;
text-decoration: none;
}
#leftNavPadding {
padding: 10px;
}
#searchbar {
height: 15px;
width: 15px;
margin: 1px;
}
#quick {
border-radius: 3px;
margin: 0;
padding: 0;
position: absolute;
clear: both;
float: left;
}
/*PIC STYLING*/
#pic {
width: 50%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
}
#pic2 {
width: 30%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
padding-top: 45px;
padding-bottom: 57px;
}
/*BUTTON STYLE*/
button {
background-color: #6e6e9a;
border: none;
color: white;
padding: 5px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
margin: 4px;
}
button:hover {
background-color: #1c1c1c;
}
.vpButton {
padding-top: 0px;
}
.profilesButton {
margin-top: 0px;
}
/*FORM STYLE*/
form {
text-align: center;
padding-top: 60px;
}
label.formLabel {
display: inline-block;
width: 300px;
font-size: 18px;
font-weight: bold;
}
#fieldset {
margin-top: -30px;
border: 2px solid #515078;
}
#legend {
color: #515078;
font-size: 24px;
}
#fieldsetBorder {
border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
border: 1px dashed #8685a7;
}
#legendLeft {
text-align: left;
}
.astrex {
color: red;
}
.trcolor {
background-color: #8a87a2;
}
/*FOOTER*/
footer {
background-color: #b1b2d2;
color: #1c1c1c;
text-align: center;
height: 70px;
clear: both;
margin-top: 10px;
}
footer p {
margin-right: 140px;
}
#footlogo {
float: left;
margin-left: 0px;
height: 70px;
width: 190px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/
.socialMediaButtons {
float: right;
margin: 1%;
padding-top: 9px;
}
.socialMediaButtons:hover {
background-color: #1c1c1c;
}
/*CONTAINER STYLE*/
#containerWidth {
width: 960px;
}
/*PROFILE PAGE STYLE*/
#title {
color: white;
font-weight: bold;
font-size: 30px;
text-align: center;
}
#title2 {
color: white;
font-weight: bold;
font-size: 20px;
text-align: center;
}
#title3 {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
}
#text {
color: white;
font-size: 15px;
text-align: left;
padding-left: 20px;
}
.topPad {
padding-top: 40px;
}
.bottomMargin {
margin-bottom: 800px;
}
.empty {
height: 20px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------INDEX PAGE----------------------------------------*/
#topDiv {
float: left;
margin: 0px;
background-color: #555b8f;
}
#arrow1 {
height: 55%;
width: 55%;
}
#introheading {
font-family: futura bold;
color: white;
font-size: 70px;
top: 40%;
right: 18%;
float: right;
position: absolute;
}
#introtext {
width: 26%;
position: absolute;
top: 70%;
right: 16%;
float: right;
font-family: Futura, sans-serif;
font-size: 15px;
color: white;
text-align: justify;
float: right;
clear: left;
line-height: 1.5em;
}
#bottomDiv {
float: right;
margin: 0px;
background-color: #555b8f;
padding-bottom: 20%;
}
#bottomArrow {
float: right;
padding: 0px;
margin: 0px;
right: 0px;
height: 55%;
width: 55%;
}
#heading2 {
font-family: futura bold;
color: white;
left: 150px;
top: 130px;
position: relative;
}
#secondHeading {
font-size: 70px;
}
#endtext {
width: 30%;
position: relative;
left: 140px;
top: 180px;
font-family: futura;
font-size: 15px;
color: white;
text-align: justify;
line-height: 1.5em;
}
#heximg {
left: 170px;
top: 20px;
position: relative;
}
#hexstyle {
height: 40%;
width: 40%;
margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------LOGIN PAGE START----------------------------------------*/
#divContainer2 {
height: 550px;
width: 550px;
margin: 0 auto;
position: relative;
}
#introDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
padding-top: 120px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
/*BUTTON STYLING*/
.buttonlayout {
width: 150px;
height: 60px;
padding: 3.5px 3px;
font-size: 20px;
font-family: futura;
margin: 10px auto;
}
#guestButton {
margin-top: -1px;
padding: -3.5px -3px;
}
.displayBlock {
display: block;
width: 150px;
height: 60px;
padding: 3.5px 3px;
margin: 0 auto;
margin-bottom: 20px;
font-size: 20px;
font-family: futura;
}
#logInDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
padding-top: 80px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#logInForm {
margin: 0 auto;
width: 350px;
}
input.form {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 20px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#registerDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#registerForm {
text-align: center;
margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/
/*--------------------------------MY PROFILE----------------------------------------*/
/* hide nav button */
#hide {
float: left;
margin: 5px;
}
.clear {
clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/
svg {
width: 19%;
stroke: #8e8db7;
stroke-width: 4;
}
#profileInfo {
width: 90%;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
.profileback {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
background-image: url(../img/back.jpg);
background-repeat: no-repeat;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
padding: 6px 12px;
cursor: pointer;
background-color: none;
position: absolute;
right: 70px;
width: 54px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------POD SEARCH PAGE START---------------------------------------*/
#basictxt {
text-align: left;
padding: 11px;
padding-bottom: 24px;
margin: 5px;
}
#quote {
text-align: left;
color: #4a486d;
font-size: 20px;
padding: 10px;
padding-top: 65px;
}
.hireButton {
padding-top: 5px;
width: 70px;
padding: 5px;
}
#hireSize {
width: 70px;
height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/
/*--------------------------------POD PROFILE PAGE START----------------------------------------*/
#enquire {
width: 150px;
height: 50px;
margin: 0px;
margin-top: -10px;
}
#divContainer {
width: 700px;
height: 700px;
margin: 0 auto;
background-color: #f5f4f9;
margin-bottom: 5%;
}
#skills {
width: 330px;
height: 750px;
background-color: #6e6e9a;
margin: 0 auto;
float: left;
z-index: 2;
position: relative;
border-radius: 3px;
overflow: hidden;
}
#skilllist {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
list-style-type: none;
}
#bio {
width: 330px;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
#workHistory {
width: 330px;
height: 750px;
background-color: #6a6cae;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 1;
position: relative;
border-radius: 3px;
overflow: hidden;
text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/
/*--------------------------------BOOK NOW PAGE START----------------------------------------*/
label {
display: inline-block;
width: 220px;
font-size: 26px;
font-weight: bold;
}
input.form1 {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#booknowFieldset {
border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/
/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/
#currentBookingTable,
.bookingtr,
.bookingtd {
text-align: center;
margin: 10px;
}
.bookingtd {
max-width: 400px;
min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/
/*--------------------------------HISTORIC BOOKING----------------------------------------*/
#Table,
th,
td {
margin: 10px;
padding: 10px;
}
/*TABLE STYLING*/
table,
th,
td {
text-align: center;
margin: 10px;
margin-left: 20%;
}
td {
max-width: 300px;
min-width: 100px;
min-height: 300%;
margin: 10px;
background-color: white;
}
th {
padding: 10px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------CONTACT US----------------------------------------*/
input.inputstyle {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#color {
background-color: white;
}
/*---------------------------------------------------------------------*/
var Content = React.createClass({ render: function() { return (
<div>
<div id="topDiv">
<img src="img/arrow1.png" alt="logo" id="arrow1" />
<h1 id="introheading">Hello, Welcome to Pod</h1>
<div id="introtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
</div>
</div>
<div id="bottomDiv">
<img src="img/arrow2.png" alt="logo" id="bottomArrow" />
<div id="heading2">
<h2 id="secondHeading">Like what <br/> you see?</h2>
</div>
<div id="endtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>POD is a pool creatives able to provide important, flexible support to fledgling and fast-growing businesses in the creative digital sector. With members recruited and retained based on a desire to develop sector-relevant skills, SharpFutures POD
offer clients the opportunity to bring on board temporary, support staff while also playing a valuable part in young people’s career development. Committing to a new full-time team member may be a stretch for small businesses, whereas having
had the opportunity to ‘try before you buy’ can give employers confidence to commit.
</p>
<br/>
<br/>
<div id="heximg">
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
</div>
</div>
</div>
</div>
)} }); ReactDOM.render(
<Content />, document.getElementById('content'));
What I need to know is how I get the page to be responsive without it looking awful. Any advice or help with this would be appreciated. We've been trying for days now and came up with nothing.
Thanks.
You have a lot of very specific sizes and widths and heights in your CSS file, which is great, if there was only one screen size.
What is generally recommended is that you choose to use either:
Break-points and media queries, wherein which you specify screen size(s) and use the media queries to change the size/placement of certain screen elements.
OR, you could go with:
Relative sizing (ie. percentages or EM sizing units) with media queries.
Here is a link to some example code:
css-tricks.com - Media Queries for Standard Devices
You need to update your CSS first. For a responsive website you need to write everything in percentage. As I noticed you have written many height, width, padding etc. in pixels(px).
Updating them all with % will help you to make it responsive.
Post that you need to use media files for particular screen size. I suggest you to use % instead to px and to do Google how to use media files.
The problem is the absolute positioning making a element be over content and isn't fixed automatically. Make the elements dynamic, then use #media screen and.. in CSS3 to make the layout responsible.
You are testing your desktop view in mobiles. It is obvious that somewhere you will find broken or overridden UI elements.
So you can customize your design by using media queries and viewport to make designs fit to your resolution.
For example you can reduce font sizes and image sizes and their positions.
Hope it helps.