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

Width as % until max size

Hello, I am looking for help. I have a div and would like it to be 75% of page width until it gets to the size of 980px and it will not get any bigger?

Thanks

3 Answers

Youssef S
Youssef S
4,467 Points

I agree to the previous answer but also take in consideration that sometimes you might want to you use only in your media query as well. @media only screen and (max-width:980px){ .div_class{ width: 75% } }

When using only, you're avoiding the misinterpretation caused by browsers lacking proper support for CSS3. Where they will recognize the first word that comes after media, which would be "screen" and ignore the rest of the rule. Thus applying the styles to whatever screen size. Only prevents this interpretation, by that if media = "only" is taken into interpretation, it has no meaning thus ignoring all styles under it. When it comes to modern browsers with proper support to media queries, both rules have the same meaning and will result in applying the style when screen size is no wider than 980px.

Read more about using only with media queries @ this Adobe Tutorial

@media screen and (max-width:980px) { .divclass { width:75%; } }

Thank you both for the help :)