Ok guys I have styled this very well, but there are a few quirks! I have tried everything and it looks great/good as a responsive site, but there are some issues. I cannot get the .therapy section to look the way I want it to. Full page it hugs the left margin, but looks good with my media queries. My question is how do i get it to look good on full page and be responsive as well. Thanks and hugs. I would like the margins to come in a few px and look like it is not using all the white space available. please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="something.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{
background-color: #f1f0d1;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 1.125em;
overflow: auto;
}
h1, h2, h3{
text-align: center;
padding-left: 5%;
color: #878e63;
}
p{
padding: 2%;
color: #878e63;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%;
background-color: #fefbe8;
border: 1px solid #878e63;
border-radius: 2px;
box-shadow: 0 0 10px 0px;
overflow: hidden;
}
#callout {
width: 100%;
height: auto;
background-color: #878e63;
overflow: hidden;
}
#callout p {
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #f1f0d1;
}
#callout p a {
color: #f1f0d1;
text-decoration: none;
}
header {
width: 96%
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 90px;
}
nav ul li {
float: left;
border: 1px solid #878e63;
width: 15%;
}
nav ul li a {
background-color: #f1f0d1;
display: block;
padding: 5% 12%;
font-weight: bold;
font-size: 18px;
color: #878e63;
text-decoration: none;
text-align: center;
}
nav ul li a:hover, nav ul li.active a {
background-color: #878e63;
color: #f1f0d1;
}
.banner img {
width: 100%;
border-top: 1px solid #878e63;
border-bottom: 1px solid #878e63;
}
.clearfix{
clear: both;
}
.left-col {
width: 55%;
float: left;
margin: 1% 1% 1%;
}
.sidebar: {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.therapy {
/*float: left;*/
margin: 0 auto;
width: 100%;
height: auto;
/*padding: 1%;*/
}
.section{
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
footer{
background-color: #878e63;
width: 100%;
overflow: hidden;
}
footer p, footer h3 {
color: #f1f0d1;
}
footer p a {
color: #f1f0d1;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img {
height: 50px;
}
#media screen and (max-width: 480px) {
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav {
width: 100%;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li {
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878e63;
border-right: 0px solid #878e63;
border-bottom: 1px solid #878e63;
border-left: 0px solid #878e63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col, .sidebar, .section {
width: 100%;
float: left;
margin: 0;
}
}
</style>
</head>
<!-- redo all images on the page and style with css3-->
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <strong>727-555-5555</strong></p>
</div><!--end callout div-->
<header>
<!--need ne image--><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?">
</header>
<nav>
<ul>
<li class="active">Home</li>
<!--make active later--><li>Contact</li>
<!--make active later--><li>Pricing</li>
<!--make active later--><li>Specials</li>
<!--make active later--><li>Consult</li>
<!--make active later--><li>Consult</li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="banner">
<img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new">
</div><!--close banner-->
<!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center>
<section class="left-col">
<!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p>
<p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p>
</section>
<aside class="sidebar">
<div class="therapy">
<img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new">
</div><!--close therapy div-->
</aside>
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center>
<footer>
<div class="section">
<p>Text Text Text</p>
<p><strong>727-555-5555</strong><br>
123 Main St<br>
Anywhere, FL 33770<br>
blank#blahblah.com</p>
</div>
<div class="section">
<p>Connect with us!</p>
<ul>
<li><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></li>
</ul>
</div>
<div class="section">
<img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new">
</div>
</footer>
</div><!--end wrapper div-->
<p>© 2014.</p><!--margin 0 auto this-->
</body>
</html>
I know it is a lot, but I am stuck, I think my math is off. Please advise me how I can resolve and thank you.
I found a typo (an unecessary colon):
.sidebar: { /*here*/
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
If you want to improve the use of white space, you need to make a concept at first. For example your text is currently above a huge image. Unter this huge image there are three smaller boxes.
So you could say in full screen you want the image and text next to each other. This is done by adding the following to the media query you want the text and image to appear next to each other:
aside.sidebar {
width: 40%;
float: right;
margin-right: 2%;
margin-top: 30px;
}
Then you need to insert
<div style="clear: both;"></div>
Below the closing </aside> tag! You have inserted something like this for your sidebar in line 106 with .sidebar:, which is a "broken code" because of the : after your css class.
This is a quite simple example, but works for all kinds of pages. If you need further explanations feel free to ask, this is a "quick help" copy & paste solution.
Best regards,
Marian.
Related
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
Essentially I am trying to use the <Div> tag to create a bottom border to separate different content on the page but when I scroll to the bottom and insert the div there to separate them, it will ignore the other tags I have put and attached itself to the previous div separator.
How can I fix this? I tried using a HR tag but it did the same.
This is my code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}
<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><span>Home</span>
</li>
<li><span>Features</span>
</li>
<li><span>App</span>
</li>
<li><span>Products</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
Order Tags
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>
I've tried changing the css and I can't find anything that would cause it, But a fresh pair of eyes may be able to find something I cannot.
The problem here comes from how you constructed your page. You have a left/right column that was built using floats. when you use float, it takes the content in the float out of the general flow of the page. Try to remove those floats and it should work as expected.
I removed your floats in the fiddle and the border started working right.
https://jsfiddle.net/ahmadabdul3/ghogvcsx/4/
here's a basic idea on how floats work: the top boxes don't overlap because there is no float, but the bottom 2 boxes you only see green because the red one is floated so the green one takes its space. to avoid this, add an explicit height to the floated div, but then you can't have dynamically expanding content. https://jsfiddle.net/ahmadabdul3/bL8qLa6j/2/
and here's a basic idea of how columns work: https://jsfiddle.net/ahmadabdul3/bL8qLa6j/5/
what is the problem? why the links is at not correct position?how can I keep the links in correct position after minimizing the browser also there is no separation between the links. why this happens?please rectify my css code. also how can I make it more resposive.
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active"><a href="#">Home</li>
<li><a href="#">About </li>
<li><a href="#">Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>First post
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2>Second post</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 1stwebdesinger.com
</p>
</footer>
</body>
</html>
You have some css and html issues in your code.
First close all <a href> tag and second remove float:left from .mainHeader nav ul li class and replace inline to inline-block so you won't need height to show background of nav.
After that you will see all menus are in one row but after resizing little bit more, menu will go down as no such space. For this issue you have to use Media query to solve or use bootstrap or navbar menu style.
You can read more about Media query or Bootstrap for responsiveness.
Check my Fiddle here.
* **Note : Whenever you are using float:left then try to use clear:both after that so there won't be any extra white gap/space however I have removed float from your code, so just side note. Hope it will help..
Changes in your style and html may it helps you
1- close your "a" tag
2- for repsponsive use style in
<style>
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
height: 20px;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
/*css for responsive */
#media (max-width:767px)
{
.mainHeader nav
{
box-sizing:border-box;
overflow:hidden;
}
.mainHeader nav ul li{
width:100%;
display:block;
float:none;
}
.mainHeader nav, .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
height:100%;
}
.mainHeader nav ul{
padding:0px 0px;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
width:100%;
}
.mainHeader nav ul li a{
border-radius:0px 0px;
}
}
</style>
<!--html-->
<nav>
<ul>
<li class="active">Home</li>
<li>About </li>
<li>Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
Two problem what i have noticed in your code you are not closing the <a> tags
2nd setting the height on hover are never a good practice. on hover links height increases that's why such things happening. see snippet
UPDATED CODE TRY MEDIA QUERY
#media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
/**MORE CODE FOR WIDTH 0 to 768px**/
}
.body {
background-color: #E8E8E8;
color: 000305;
font-size: 87.5%;
/*Base font size 14px*/
font-family: arial, "Lucida Sans Unicode";
font-height: 1.5;
text-align: left;
margin: 0 auto;
width: 70%;
clear: both;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #CF5C3F;
}
a:hover,
a:active {
background-color: #CF5C3F;
color: #FFF;
}
.mainHeader img {
width: 20%;
height: auto;
margin: 2% 0;
border-radius: 90px;
}
.mainHeader nav {
background-color: #666;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
margin-left: 3%;
padding: 2%;
margin-bottom: 2%;
}
.mainFooter {
width: 100%;
float: left;
border-radius: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
background-color: #666;
margin-top: 2% margin-bottom: 2%;
height: 40%;
}
.mainFooter p {
margin: 10px auto;
width: 92%;
color: #FFF;
}
.postinfo {
font-style: italic;
color: #999;
font-size: 90%;
}
#media all and (max-width: 768px) {
.mainHeader nav a:link, .mainHeader nav a:visited {
font-size:80%;
padding: 10px 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->
<body class="body">
<header class="mainHeader">
<!--Main logo of the page!-->
<img src="img/images.jpeg" alt="logo here">
<!-- Main navigation bar!-->
<nav>
<ul>
<li class="active">Home</li>
<li>About </li>
<li>Portofolio </li>
<li><a href="#">Contact </li>
</ul>
</nav>
</header>
<!--Main content starts here!-->
<div class="mainContent">
<div class="content">
<article class="topcontent">
<header>
<h2>First post
</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
<!--bottom content starts!-->
<article class="bottomcontent">
<header>
<h2>Second post</h2>
</header>
<footer class="postinfo">
<p>This post is written by Christian</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
</content>
</article>
</div>
</div>
<!--This is the right side content!-->
<aside class="top-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Top sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
</article>
</aside>
<!--This should be the foot of the webpage!-->
<footer class="mainFooter">
<p>Copyright © 2016 1stwebdesinger.com
</p>
</footer>
</body>
</html>
what I'd like to achieve is a border-bottom 20px below my h1 tag in my sidebar and also have 20px of "white space" below my border-bottom. I'd also like to have this underneath my h1 tag in my content area.
Here's the link to what I have now
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul / Cbua</h1>
<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<h1>News</h1>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
</div>
</div>
CSS:
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
position: absolute;
/* # */
height: 100%;
width: 318px;
float: left;
padding-bottom: 20px;
padding-top: 20px;
}
#sidebar h1 {
border-bottom: thick;
border-bottom-width: 75%;
}
.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}
.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0;
width:300px;
}
.sidelink ul {
margin: 0;
padding: 0;
margin-left: 20px;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}
h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}
/* Content */
#content {
width: 642px;
float: right;
padding-top: 20px;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding-right: 25px;
}
Try this and see how you go
#sidebar h1 { border-bottom: 1px solid black; margin-bottom: 20px; }
h1 {
border-bottom: 20px solid #000000;
}
AND
h1 {
margin: 0 0 20px 0;
}
OR
h1 {
margin-bottom: 20px;
}
Combine both rules though... So more like this:
h1 {
margin: 0 0 20px 0;
border-bottom: 20px solid #000000;
}
#sidebar h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
If you want it for all h1
h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
Try this CSS:
div > h1 { border-bottom: 20px solid black; margin-bottom: 20px; }
As Illustrated in the next graphic I have a problem with my responsive code: I have 3 sections called square1, 2 and 3 with a white div inside. text on top of it and an icon with an absolute position. Everything fine from 920px to higher browsing. Now, from 720 to 940 pixels I'm trying to give this 3 elements a 50% of width, to display two on top and 1 at the bottom, but centered. so far is a mess. Could someone explain me what I'm doing wrong? my actual DEMO
HTML:
<div id="section2">
<div id="centralize2">
<div id="square1">
<div id="white1">
<img src="images/hexagon1.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div id="white1">
<img src="images/hexagon2.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div id="white1">
<img src="images/hexagon3.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
Thanks!!
You can use flexbox to achieve what you want. Don't use absolute positioning if it's not necessary. If the width is bigger than 940px, the divs will display next to each other. Try it out in the full version of the code snippet.
Also cleaned up some code, as you can't have multiple divs with the same id. That's not valid markup. Use a class instead.
#section2 {
position: relative;
background-color: #112e4c;
overflow: hidden;
}
#square1, #square2, #square3 {
margin-top: 59px;
}
.white1 {
margin: 20px;
background-color: #fff;
text-align: center;
}
.hexagon {
position: absolute;
left: 50%;
}
.title1 {
font-size:18px;
margin-top: 90px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (min-width:720px) {
#centralize2 {
display: flex;
flex-flow: row wrap;
}
#square1, #square2, #square3 {
flex-basis: calc(50%);
}
}
#media all and (min-width:940px) {
#square1, #square2, #square3 {
flex-basis: calc(100%/3);
}
}
<body>
<div id="section2">
<div id="centralize2">
<div id="square1">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
</body>
It has to do with your absolute positioning. Try removing the absolute positioning, and try floating the blocks left and add your margins as needed. Will try and get a working demo together for you asap, at work atm.
Got a chance to try and edit your demo, I believe you're looking for something like this https://jsfiddle.net/ah5zz8qq/
#section2 {
width: 100%;
background-color: #112e4c;
overflow: hidden;
}
#centralize2 {
width: 880px;
height: 310px;
margin: 40px auto;
text-align: center;
}
#square1 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square2 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square3 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#white1 {
width: 280px;
height: 250px;
background-color: #fff;
text-align: center;
position: relative;
}
.hexagon {
position: absolute;
left: 50%;
top: 0;
margin-left: -52px;
margin-top: -59px;
}
.title1 {
display: block;
font-size:18px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (max-width:940px) {
#centralize2 {
width: 90%;
}
#section2 {
height: 720px;
}
#square1 {
display: block;
width: 50%;
float: left;
}
#square2 {
display: block;
width: 50%;
float: left;
margin-bottom: 10px;
}
#square3 {
display: block;
clear: both;
width: 50%;
float: none;
margin: 0 auto;
}
#white1 {
width:300px;
}
}
#media all and (max-width:720px) {
#section2 {
height: 1070px;
}
#buttons {
margin-top:25px;
}
#square1 {
width: 100%;
}
#square2 {
width: 100%;
margin-top:340px;
}
#square3 {
width: 100%;
margin-top:340px;
}
#white1 {
width: 100%;
position: absolute;
}
}
}