Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS The Solution

Brett Walford
Brett Walford
3,877 Points

Why 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
Robert Stefanic
35,157 Points

Do 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
Brett 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
Robert Stefanic
35,157 Points

It 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 .box to resize.

Brett Walford
Brett Walford
3,877 Points

That 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
Robert Stefanic
35,157 Points

Okay, 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-box rule 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.