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

Dmytro Stoianov
Dmytro Stoianov
6,647 Points
Posted by Dmytro Stoianov
Dmytro Stoianov
6,647 Points

Why did we use max-height property in our second @media query rule instead of just using height property?

In our second media query, when reducing our ".main-header" height we used max-height property. On the other hand, in our main .main-header rule (Yeah6 I know it's sounds cheesy) we simply set the height using "height" property. Is there any difference or it's just an option that we can choose and both declaration would be correct?

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

The "max-height" property establishes an upper limit, but the based on the contents the item can contract to a smaller size.

On the other hand "height" establishes both a limit and a desired size, so the item will take up that much space even if the contents do not require it.

Nicole Antonino
Nicole Antonino
12,834 Points
Nicole Antonino
Nicole Antonino
12,834 Points

So first, the height of an element is determined on the size of the children inside it and their padding properties etc. Unless you define the exact height of the element, the default height will just be however much space the stuff inside takes up.

In the previous non-media query code, he wrote the code according to how the page looks like on a normal computer/laptop screen. And in this case he locked the height at a specific value (850px) using the height property. The normal height property locks the height at exactly the value given, regardless of the device screen size.

In the second media query for devices with a max-width of 786px he used the max-height property because he doesn't want to lock the height of the main-header to a specific height, but rather he wants it to be whatever its default size is only until the main-header reaches a height of 380px. The max-height property in the media query overrides the height property value from earlier.

If he didn't put a max-height in the his media query, then the main-header's height would be assigned to 850px on all device sizes, which takes up way too much space on smaller devices and wouldn't look too great.