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 Layout Basics Positioning Page Content Fixed Positioning

Richard Targett
Richard Targett
4,960 Points
Posted by Richard Targett
Richard Targett
4,960 Points

With media queries, is styling once enough?

Do you style everything twice? Once for a large width, then a smaller query?

1 Answer

Christopher Bolivar
Christopher Bolivar
10,879 Points
Christopher Bolivar
Christopher Bolivar
10,879 Points

You 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!