Div not letting 100% of width when resizing browser
Question
I remember it used to work when I set the width to 100% once resized at certain pixels from desktop to tablets to mobile. Just don't know why mine won't work this time around for some reason. Trying to get header, content, and footer to be 100% of its width when resizing its pixels.
FYI, haven't got to the footer yet.
*. { width: 100%; } body { font-family: Andale Mono, monospace; } p { font-size: 24px; }.header { padding: 200px; text-align: center; background-color: #001f4d; }.header h1 { font-size: 64px; color: white; }.header p { color: white; } /* Begin main-content */.content { background: #0d0d0d; padding: 80px; color: white; } #main-title { text-align: center; font-size: 36px; } #main-paragraph { margin: 400px; max-width: 1000px; margin: auto; }.column { float: left; width: 33.33%; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* Small devices (portrait tablets and large phones, 600px and up) */ @media screen and (max-width: 600px) {.header { width: 100%; }.content { width: 100%; } #main-paragraph { width: 100%; }.column { width: 100%; } }
<,DOCTYPE html> <html> <head> <title>Doug Cannon's Biography</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header"> <h1>My Website</h1> <p>Welcome to my website.</p> </div> <div class="content"> <h2 id="main-title">About Me</h2> <p id="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis:</p> <br><br><br> <;-- Responsive column cards --> <div class="row"> <div class="column" style="background-color.#aaa."> <h2>Column 1</h2> <p>Some text:;</p> </div> <div class="column" style="background-color.#bbb."> <h2>Column 2</h2> <p>Some text:;</p> </div> <div class="column" style="background-color.#ccc."> <h2>Column 3</h2> <p>Some text;.</p> </div> </div> </div> <!-- End main-content --> <div class="footer"> <footer> Douglas Cannon <span class="highlight">© 2019</span> </footer> </div> </body> </html>
3 answers
solution1
3 2019-12-16 00:39:16
I see what is happening here!
Your header has 200px of padding and the content has 80px . When the width of the window is above 600px, the width of the content and header is auto , so it's the width of their container ( <body> ) minus the 200px/80px padding, and because the padding is on the outside of the width, they fill up the width of the window nicely!
Then when the window size goes below 600px, the width of the header and content is set to 100% of the container, but the 200px/80px of padding is on the outside of this 100% so the element takes up much more space! If you set the box-sizing to border-box , then the padding gets put on the inside and you don't see any change when the window width changes.
I think what you want to do is reduce the padding instead of making the width 100%, to make the content wider! Also you might want to do something about the 8px of margin on <body> , because that's why there is a gap around the whole page.
I hope I got it right :)
solution2
0 2019-12-16 04:17:53
To make the space around the content decrease when the screen goes below 600px
*. { width: 100%; } body { font-family: Andale Mono, monospace; margin: 0; } p { font-size: 24px; } .header { padding: 80px; text-align: center; background: #001f4d; } .header h1 { font-size: 64px; color: white; } .header p { color: white; } /* Begin main-content */ .content { background: #0d0d0d; padding: 80px; color: white; } #main-title { text-align: center; font-size: 36px; } #main-paragraph { max-width: 1000px; margin: auto; } .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { background: #001f4d; padding: 80px; color: white; } /* Small devices (portrait tablets and large phones, 600px and up) */ @media screen and (max-width: 600px) { .header { padding: 40px; } .content { padding: 40px; } .footer { padding: 40px; } }
<!DOCTYPE html> <html> <head> <title>Doug Cannon's Biography</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header"> <h1>My Website</h1> <p>Welcome to my website.</p> </div> <div class="content"> <h2 id="main-title">About Me</h2> <p id="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p> <br><br><br> <!-- Responsive column cards --> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> </div> </div> <!-- End main-content --> <div class="footer"> <footer> Douglas Cannon <span class="highlight">© 2019</span> </footer> </div> </body> </html>
solution3
0 2022-09-10 16:28:27
For anyone who comes here, I had two issues that were causing the browser to render the page with the page html not sizing 100% of the browser viewport.
First I was using img tags with the style width set in the html as such; <img id="recipe_picture" class="method-img" src="{{ step.picture1() }}"/>
Second after resizing the issue was preset due to my hacky attempts at fixing the issue by setting the main container padding to 0 (actually making things worse)
.container{
padding: 0;
}
after removing these parts the issue was resolved, hope this helps someone
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.