The content boxes look good when they're full size, but when the page shrinks they are no longer centred. I've tried messing around with a bunch of things but can't for the life of me figure out what's wrong.
I've only been learning to code for a few weeks to please be kind lol, however if you have any off topic tips they are also appreciated
* {margin: 0; padding: 0}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim. Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
You have to read more about box-sizing, just add box-sizing: border-box; to all elements and it will fix your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra
ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim.
Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
Here is a link where you could know more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS Property Border-Color Not Working
(6 answers)
Closed 9 months ago.
I am having some trouble understanding why margin: 1rem is not applying to my footer element. When I modify the size, only the text content in the <p> for the article div and aside element are modified. There is no margin between the footer text and the background color on the top and bottom, only on the left and right. Could anyone tell me what's causing this? Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
clear: both;
background-color: aqua;
display: block;
border: black 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
</style>
</head>
<body>
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
</body>
</html>
The margin is applied - your problem is just that you have declared a 10px border without declaring a border-style, so essentially it looks like the p-element's margin is overflowing, because there is an invisible border of 10px. Apply a border-style and you will see the margin:
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
display: block;
border: black solid 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis congue, justo orci volutpat justo, semper vestibulum mauris est mattis mi. Duis tincidunt enim congue elit egestas, ut ultrices
purus vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor aliquam massa. Pellentesque maximus tortor ac est ultricies, id sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada dolor quis ante tempus, eget posuere massa egestas. Integer feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta. Suspendisse sagittis eros vitae urna convallis,
sit amet venenati
</p>
</footer>
</section>
I believe that is margin collapse.
I can see the intent to set a black border on the parent element footer in the first place. But that probably isn't working, and border: black 10px solid; would do the trick. And the margin collapse would no longer occur in this case.
Please read following page to learn about the margin collapse.
What is Margin Collapse in CSS? And How to Avoid It
And, as the other answers pointed out, perhaps it is padding, not margin, that suits your purpose.
You need to give padding to footer
Changes I made
In BODY tag
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
IN FOOTER
padding: 2%;
You apply box-sizing then i think you like to use padding. I refactor your css a little bit.
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
box-sizing: border-box;
padding: 10px;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
I want to create a sticky background which starts to stick after the header is scrolled out of frame
so far this is my progress
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.header
{
width:100%;
background-color:black;
height:100px;
}
div.sticky {
position: -webkit-sticky;
position:sticky;
width:100%;
top: 0;
z-index: -1;
}
#contain
{
width: 50%;
background-color: yellow;
margin: auto;
padding-left: 100px;
padding-right: 100px;
height: 1000px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg" style="background-size: cover; flex-shrink: 0;min-width: 100%;min-height: 100%; "></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
</body>
</html>
but the yellow div is below the image, whereas I need it to start below the black header
so is there anyway to "ignore" the middle image wrapper <div>?
(I'm a beginner so please provide the simplest possible solution)
Make its height 0:
.header {
background-color: black;
height: 100px;
}
div.sticky {
position: sticky;
top: 0;
z-index: -1;
height:0;
}
div.sticky img {
width: 100%;
}
#contain {
width: 50%;
background-color: yellow;
margin: auto;
padding:10px 100px;
height: 1000px;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
Or consider a hack using float and shape-outside:
.header {
background-color: black;
height: 100px;
}
div.sticky {
position: sticky;
top: 0;
z-index: -1;
float:left;
width: 100%;
shape-outside:inset(50%);
}
div.sticky img {
width: 100%;
}
#contain {
background-color: yellow;
margin:0 20%;
padding:10px 100px;
box-sizing:border-box;
height: 1000px;
display:inline-block;
}
<div class="header"></div>
<div class="sticky"><img src="https://images.all-free-download.com/images/graphicthumb/small_mouse_macro_515329.jpg"></div>
<div id="contain">
<h2>Scroll </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut
</p>
</div>
I'm trying to replicate the sections on the following page
I'm using flexbox in my version, however my version using flexbox seems to adjust to smaller screen sizes differently. For example the original that I'm trying to copy eats into the margin first as the screen gets smaller before adjusting the size of the text and images. When it does adjust the size of the the text and image it seems to do it a way that's a lot more asthetically pleasing. Once the screen size hits 960px wide I'm going to use media queries to set flexbox to block. However I'd like the text and images to adjust the same was the originally between 1440px and 960px. I've recorded a video to show what I mean - https://youtu.be/1pKq_UW-3Hk
And here's my code...
.section3-h1 {
font-size: 3.125rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap-reverse;
}
.section2-text {
max-width: 537px;
margin-right: 74px;
}
.button {
margin-top: 60px;
}
.section3-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap;
}
.section3-text {
max-width: 537px;
margin-left: 74px;
font-family: "Roboto";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</body>
</html>
Here is your code completely rewritten, removing all of the max-widths and unnecessary CSS. I added the media query for desktop styles as well.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
section {
margin: 0 20px;
max-width: 1170px;
padding: 50px 0;
}
section header {
display: flex;
flex-direction: column;
}
section header .text {
margin: 30px 0 0 0;
}
section header img {
display: block;
width: 100%;
height: auto;
}
section.reverse header .text {
order: 2;
}
section.reverse header img {
order: 1;
}
#media (min-width: 992px) {
section {
margin: 40px auto;
}
section header {
flex-direction: row;
flex-wrap: nowrap;
}
section header .text {
flex: 0 0 calc(50% - 30px);
margin: 0 0 0 30px;
}
section header img {
flex: 0 0 calc(50% - 30px);
margin: 0 30px 0 0;
}
section.reverse header .text {
margin: 0 30px 0 0;
order: 1;
}
section.reverse header img {
order: 2;
margin: 0 0 0 30px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<div class="container">
<section id="section2" class="reverse">
<header class="section2-head">
<div class="section2-text text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
</div>
<div class="container">
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</div>
I've observed that you have written so much redundant code in here. I have reframed you code.
please refer the code below. I have changed all classes and structure to reduce stylesheet overhead.
* {
font-family: "Roboto";
}
.button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
margin-top: 60px;
}
.container {
width: 90%;
margin: 0 auto;
}
.flexbox {
display: flex;
flex-grow: 1;
flex-basis: 0;
}
.flexbox * {
width: 100%;
}
.marr74 {
margin-right: 74px;
}
.marl74 {
margin-left: 74px;
}
.flex-image img {
width: 100%;
}
.heading {
font-size: 3.125rem;
}
#media only screen and (max-width: 764px){
.flexbox {
flex-direction: column;
}
}
And here is HTML
<section>
<div class="container">
<div class="flexbox">
<div class="flex-content marr74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
</div>
<div class="flexbox">
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
<div class="flex-content marl74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
</div>
</div>
</section>
Also note that you should not use more than one h1 on one single page. This affects the SEO of your website. Instead use p or similar element with font-size to achieve large fonts.
I need some help to hide the background color of my container div.
The main content area is structure in such a way that the article tags stack on top of each other and then after that the footer should take up whatever space is left.
I have tried to get rid of the space between the article tag and the footer while still keeping the margin. In order words I want to get rid of the blue line while.
Can someone give me a hint of how to achieve this?
#container {
background-color: #004bb8;
min-width: 320px;
max-width: 960px;
}
/*------Header-----*/
header {
background-color: lightsalmon;
border-bottom: solid #65ff09 2px;
}
h1, h2 {
font-family: "Impact";
margin: 0px;
padding: 0px;
color: darkred;
text-align: left;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-container {
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 1%;
}
#sitename{
float: left;
width: 46%;
margin: 0 1% 0 1%;
padding: 8% 1% 1% 1%;
}
header::after {
content: "";
display: block;
clear: left;
}
header img {
width: 250px;
margin: 0 auto;
}
header h1 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 1.5em;
padding: 10px 10px;
color: #f9db00;
}
header h2 {
font-family: "Abel", sans-serif;
text-transform: uppercase;
font-size: 0.8em;
padding: 10px 10px;
color: #ff2a86;
}
/*-------navigation------*/
nav {
width: 100%;
background-color:
}
nav ul li {}
nav ul li a {
display: block;
text-align: center;
border-radius: 5px;
padding: 0.5em;
margin: .3em;
border: 1px solid #fff;
background-color: #004bb8;
text-decoration: none;
color: #fff;
}
nav ul li.active a {
background-color: #b8005c;
}
nav ul li a:hover {
background-color: #f9db00;
color: #323C40
}
/*-------content------*/
#content {
min-height: 5em;
background-color: #fff;
}
#content article {
margin: 0 2%;
}
#content article.News, #content article.Tweets {
background-color: #ddd;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
article.News h2, article.Tweets h2 {
background-color: darkgray;
color: #fff;
padding: 0.5em;
font-size: 0.8em;
}
article.News h2 {background-color: #004bb8;}
article.Tweets h2 {background-color: #b8005c;}
article.News h3, article.Tweets h3 {
padding: 0.5em 0 0 1%;
font-size: 1.0em;
}
article.News h3 {color: #004bb8;}
article.Tweets h3 {color: #b8005c;}
article.News p, article.Tweets p {
color: #666;
font-size: 0.8em;
padding-left: 1%;
padding-right: 1%;
line-height: 120%;
}
#contents article.Tweets::after {
content: "";
display: block;
clear: left;
}
/*-------footer------*/
footer {
clear: both;
text-align: center;
padding: 1em;
background-color: #111;
color: #fff;
font-size: 0.6em;
}
/*---------IMAGES------------*/
figure.w100 {
overflow: hidden;
width: 100%;
}
figure.w33 {
width: 96%;
border: 1px solid #999;
margin: 0.3em 0 0.3em 2%;
}
figure.w33 img {
width: 100%;
}
figure.w100 img {
width: 100%;
}
#content figcaption {
text-align: center;
font-size: 0.6em;
color: #777;
padding: 0.3em;
}
<body>
<div id="wrapper">
<div id="container">
<header>
<div id="image-container">
<img src="img/logo.png" alt="logo">
</div>
<div id="sitename">
<h1>Responsive Design</h1>
<h2>Don't Settle for Less</h2>
</div>
</header>
<!--------Page Navigation Links -->
<nav>
<ul>
<li>Desktop Work Around</li>
<li class="active">Phone-Default</li>
<li>Tablet Enhancement</li>
<li>Reset CSS</li>
</ul>
</nav>
<!--------Page Content -->
<div id="content">
<figure class="w100">
<img src="img/lake.jpeg" alt="lake">
</figure>
<article>
<h2> Lorem Ipsum</h2>
<figure class="w33">
<img src="img/car.jpeg" alt="car">
<figcaption> what i wish to drive when i get super rich</figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<div class="row">
<article class="News">
<h2>News</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
<article class="Tweets">
<h2>Tweets</h2>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
<h3>A list apart finally goes responsive</h3>
<p> Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.
</p>
</article>
</div>
</div>
<!-----End of Content --->
<footer>
<p>© Buko Ogbobe Responsive Start File</p>
</footer>
</div> <!----end of Container ---->
</div> <!----end of Wrapper ---->
</body>
Here's two solutions, you can use :
footer {
margin-top:-13px;
}
or :
#content article.Tweets, article.Tweets p {
margin-bottom:0px;
}
This will fix the gap in between your footer and content.