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 Getting Started with CSS Layout Using a Mobile First Approach

Jelena Dragicevic
PLUS
Jelena Dragicevic
Courses Plus Student 3,768 Points
Posted by Jelena Dragicevic
Jelena Dragicevic
Courses Plus Student 3,768 Points

I am a bit confused, how do I know what exactly I can put inside the media query vs outside of it?

For example if I have an example like below outside of the media query, why cant I add this information inside @media ?

.main-nav li
{
text-align: center;
background:grey;
margin-top: 6px;
margin-bottom: 6px;
}

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hi Jelena

The media query, in this case, is for responsive web design so anything outside the query is the default styling and anything inside is determined by what media query you target.

Heres an example using your css:

.main-nav li {
    text-align: center;
    background:grey;
    margin-top: 6px;
    margin-bottom: 6px;
}

@media (min-width: 576px) {
    .main-nav li {
        background: red;
    }
}


@media (min-width: 768px) {
    .main-nav li {
        background: green;
    }
}

On all devices, I want everything the same apart from the background colour to change so within the media query all I have to declare is the changing value which is the background colour.

By default, it is grey, on 576 and higher (tablets) it is red and 768 and up (desktop) it is green, every other value will be the same throughout each breakpoint.

Jelena Dragicevic
Jelena Dragicevic
Courses Plus Student 3,768 Points
Jelena Dragicevic
Jelena Dragicevic
Courses Plus Student 3,768 Points

Thank you, I understand it now, that whatever you write outside of the media it is the default of the browser and whatever is inside is changing when it reaches that specific size of the media.