CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Could someone clarify Responsive Layout and min-width?

Hi all,

So I'm following along with the Using a Mobile First Approach video with Guil, and this was the code that he typed out in the video:

@media (min-width: 769px) {

.container {

    width: 70%; 

    max-width: 1000px; 

    margin: 0 auto;

}

}

Is the media query of setting 769px as the min width indirectly stating that any resolution below 769px (mobile devices) will instead take on default layout values? I think I'm being confused because it seems like a roundabout way of going about it.

Thanks for any clarification.

1 Answer

Nils Kriedner
Nils Kriedner
Front End Web Development Techdegree Student 19,062 Points

Yes, exactly as you wrote. You understood it right, don't let confusion get you. :-)

The rule inside the media query runs when its definitions are met. Otherwhise the normal styling applies.

Oh okay cool, so it's basically like an if-statement in programming.

Thanks for the fast response!

Nils Kriedner
Nils Kriedner
Front End Web Development Techdegree Student 19,062 Points

Yes, like if-then.

If the media query definitions are met - then the CSS rules inside of it apply.