1
00:00:00,090 --> 00:00:05,330
Now we'll create the star rules to make our layout responsive on mobile devices.

2
00:00:05,370 --> 00:00:11,810
We'll start with devices that have a maximum screen size of eight hundred and forty pixels for these

3
00:00:11,810 --> 00:00:14,810
will drop the right column under the other two columns.

4
00:00:15,710 --> 00:00:19,440
Let's take a look at an example.

5
00:00:19,610 --> 00:00:25,750
So when the screen size falls below eight hundred forty pixels you'll notice that the right call them

6
00:00:26,380 --> 00:00:32,730
falls underneath the other two so that's the first rule we want to set up.

7
00:00:32,770 --> 00:00:39,140
So I'll start with a comment just as separated from the navigation styles we'll need to start with it

8
00:00:39,340 --> 00:00:46,360
a media property and set the max with to eight hundred and forty pixels.

9
00:00:46,880 --> 00:00:59,580
Now we'll create a rule for the left column and set the margin left definition to negative 100 percent.

10
00:01:00,930 --> 00:01:06,650
That will create a rule for the right column Sex float to none.

11
00:01:06,700 --> 00:01:17,300
Which to 100 percent margin left to zero and clear to both create a need for the content column.

12
00:01:17,700 --> 00:01:19,790
Would just set the margin rate to zero

13
00:01:24,770 --> 00:01:30,380
and then just close our media our Open Media style.

14
00:01:34,810 --> 00:01:41,400
Now we'll create a set of rules for devices with a Mac screen size of six hundred pixels so it's six

15
00:01:42,120 --> 00:01:51,840
below six hundred pixels we want both the left and the right column to be positioned underneath the

16
00:01:51,840 --> 00:01:55,260
main the main center content area.

17
00:01:56,520 --> 00:02:14,860
So that makes it fully responsive on all devices.

18
00:02:18,320 --> 00:02:25,440
We have two rules one for the left column and one for the content column so you can go ahead and enter

19
00:02:25,440 --> 00:02:33,780
those and once you've finished that we've completed our entire style sheet and in the next lesson we'll

20
00:02:33,780 --> 00:02:36,210
start building the page in our body takes.