Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brett Walford
3,877 PointsWhy are the box dimensions changing when I change the size of the browser window?
I completed the Practice for Box Model Sizing. I made all the corrections after seeing the solutions. But the box still changes size based on the size of the browser window. Am I missing something?
1 Answer
Robert Stefanic
35,170 PointsDo you have your code that you can share? The box-sizing property affects how the content, padding, and border are calculated. If you're resizing your browser and the boxes are changing sizes, then my initial guess is that it's a media query that you have that's having an effect on the size of your boxes.
Brett Walford
3,877 PointsBrett Walford
3,877 Points/* =========================================================== Practice CSS Box Model ============================================================== */
.box { width: 90%; height: 300px; max-width: 600px;
padding: 20px;
border: 2px solid;
margin: auto;
overflow: auto;
box-sizing: border-box;
/* Apply a fluid width of 90% and a height of 300px. The width of .box should get no wider than 600px. */
/* Add 20 pixels of padding on all four sides. */
/* Apply a 2px solid border to each side. */
/* Use margins to center .box on the page. */
/* Prevent the contents of .box from overflowing. */
/* Force border-width and padding values into the total width and height of .box */
}
Robert Stefanic
35,170 PointsRobert Stefanic
35,170 PointsIt looks like you've added all of the rules that were in the comments, and it looks like it should behave properly. Do you have the rest of your style sheet (and relevant HTML)? I still think there could be a media query that's causing
.boxto resize.Brett Walford
3,877 PointsBrett Walford
3,877 PointsThat is the complete style sheet. Here is the html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Practice CSS Box Model</title> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="http://treehouse-code-samples.s3.amazonaws.com/practice-css/styles-box-model.css" rel="stylesheet"> <link href="box-model.css" rel="stylesheet"> </head> <body> <div class="box">
<h1>CSS Box Model</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum dolor eget sapien malesuada, non rhoncus leo convallis. Suspendisse potenti. Sed sed tellus at lorem malesuada ullamcorper et ac magna.</p> <p>Donec egestas nunc eget posuere porttitor. In eget ante in turpis ultrices efficitur. In congue, leo sed sagittis pellentesque, dolor arcu pulvinar nunc, ut elementum lacus turpis a nisl.</p> <p>Maecenas auctor erat placerat accumsan egestas. Praesent maximus quam ligula, eget ullamcorper urna dapibus at. Mauris a elit viverra, dictum neque quis, fringilla elit. Nam a fermentum odio.</p> <p>Ut ex leo, ultrices hendrerit sem eu, vulputate maximus quam. Aliquam condimentum metus vitae fringilla maximus.</p> </div> </body> </html>
Robert Stefanic
35,170 PointsRobert Stefanic
35,170 PointsOkay, I see. The box has a set width of 600px. So if your window is 1200px wide, then the box will be 600px -- that is the max-width of the box.
If you resize your window and make it smaller than 600px, then the box will be 90% of width of the window because of the first rule that you have in .box (which is
width: 90%;).The box-sizing rule just makes it so that your padding and border are accounted for in the total width and height of your box.
So without box-sizing, if you were to shrink your window to be less than 600px, then the box would be 90% of your window wide and extend outward 22px in all directions (20px for the padding and 2px for the border).
So in this case, the
box-sizing: border-boxrule just makes it so that the total width and height for your box doesn't exceed 600px by 300px. It also says that when your box is 90% of your window's width, there's 20px of padding and 2px of border that always needs to be accounted for.