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

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Matthew Keys
Matthew Keys
1,922 Points
Posted by Matthew Keys
Matthew Keys
1,922 Points

Sizing of wildlife div

Why does the size of the background image change when we make the padding smaller when the page is lower than 1024 px? Doesnt the "box-sizing: border-box" rule apply to it?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Matthew,

Which part of the video are you referring to?

2 Answers

anglin
anglin
8,105 Points

I'm not sure I understand your question... "box-sizing: border-box" makes it so that the padding doesn't add to the total width or height of the div, if you already set up a fixed width/height. Because the video example doesn't use a fixed height/width (it uses %), so... the size of the div will change according to how wide your browser window is. With the box model, the wildlife div is boxed within the primary content div. When the primary content div resizes, any elements within it will adjust as well (that's what makes it responsive to any size window).

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

The box model takes some trying out to get used to, and I'm still learning too... https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp click on the 'Try It Yourself' to run some examples'. Good luck!

Matthew Keys
Matthew Keys
1,922 Points
Matthew Keys
Matthew Keys
1,922 Points

Ah I understand now. Thanks

anglin
anglin
8,105 Points
anglin
anglin
8,105 Points

Hi Matthew,

If you're asking about the background image, the original CSS for the wildlife div includes this property:

.wildlife {
  background-size: cover;
}

This means the image covers the entire wildlife div. "Cover" means it will resize to the size of the div, so if the div size changes, the image stays proportional and is equal to the size of the entire div.

Because in this video we used @media query to adjust the padding for different view widths, that means the div size changes due to the padding change and so the background picture will fit to that div size. There's no conflict with using "box-sizing: border-box", since it takes padding into account. See https://css-tricks.com/box-sizing/ for a cool demo of what that does.

Hope that helps.

Matthew Keys
Matthew Keys
1,922 Points
Matthew Keys
Matthew Keys
1,922 Points

Thank you for the reply. I am not referring to the background image, I am asking why does the size of the div change when I add padding, because I thought that when you add "box-sizing: border-box", it makes it so that the padding does not change the size of the div.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Is this something that happens in the video or is it your own experimentation?

Can you post a snapshot of your workspace and then let us know what you're changing so that we can see what you're seeing?

In your question, you referred to the size of the background image changing and in your comment here you said that you're not referring to the background image.