Now we'll create the star rules to make our layout responsive on mobile devices.
We'll start with devices that have a maximum screen size of eight hundred and forty pixels for these
will drop the right column under the other two columns.
Let's take a look at an example.
So when the screen size falls below eight hundred forty pixels you'll notice that the right call them
falls underneath the other two so that's the first rule we want to set up.
So I'll start with a comment just as separated from the navigation styles we'll need to start with it
a media property and set the max with to eight hundred and forty pixels.
Now we'll create a rule for the left column and set the margin left definition to negative 100 percent.
That will create a rule for the right column Sex float to none.
Which to 100 percent margin left to zero and clear to both create a need for the content column.
Would just set the margin rate to zero
and then just close our media our Open Media style.
Now we'll create a set of rules for devices with a Mac screen size of six hundred pixels so it's six
below six hundred pixels we want both the left and the right column to be positioned underneath the
main the main center content area.
So that makes it fully responsive on all devices.
We have two rules one for the left column and one for the content column so you can go ahead and enter
those and once you've finished that we've completed our entire style sheet and in the next lesson we'll
start building the page in our body takes.