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 trialRichard Targett
4,960 PointsWith media queries, is styling once enough?
Do you style everything twice? Once for a large width, then a smaller query?
1 Answer
Christopher Bolivar
10,879 PointsYou don't need to repeat every single CSS rule, when creating a media query declare a new rule for the element you wish to select and only re code the CSS property you wish to alter.
For example:
/*======
Mobile First CSS
=====*/
body {
width: 90%
margin: 0 auto;
background: blue;
}
/*======
Media Quert for screen sizes 768px (iPads and larger screens)
=====*/
@media screen and (min-width: 768px) {
body {
width: 70%;
}
}
Notice I only had to use the the width property. The margin and the blue background will stay the same when the view port is 768px or higher. Hope this helps!