1
00:00:04,100 --> 00:00:06,620
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,620 --> 00:00:09,470
In this lecture we're gonna be making a response of columns.

3
00:00:09,470 --> 00:00:18,800
So right now we have these pages set up and in mobile mode we can see that we have an icon up top and

4
00:00:18,800 --> 00:00:21,610
then text and then we have text again and an icon.

5
00:00:21,710 --> 00:00:27,920
And that's happening because we made this design which is typical on a Web page where you have the icon

6
00:00:27,920 --> 00:00:35,510
on the left and then on the right you would have the next icon and then you have the icon on the left

7
00:00:35,510 --> 00:00:35,750
again.

8
00:00:35,750 --> 00:00:41,150
So this exact format but because we're designing mobile first we are going to change up our code so

9
00:00:41,150 --> 00:00:51,110
that instead of displaying on the bottom here we're going to move this icon to display on the top on

10
00:00:51,110 --> 00:00:54,830
mobile but still keep the zigzag on Web.

11
00:00:54,830 --> 00:00:55,940
So how are we going to do this.

12
00:00:55,940 --> 00:01:00,530
Well mobile first means that your code is optimized for mobile.

13
00:01:00,530 --> 00:01:06,260
So everything in your code initially will be what the mobile is going to look like.

14
00:01:06,260 --> 00:01:12,600
And then you would add media queries for other screen sizes that are larger.

15
00:01:12,650 --> 00:01:18,130
So that means we're gonna have to change this up in order to make it mobile first going to actually

16
00:01:18,160 --> 00:01:22,370
to change our code and then add media queries for the Web site.

17
00:01:22,430 --> 00:01:23,580
So how are we going to change as well.

18
00:01:23,660 --> 00:01:30,350
We're going to take this column that we have and we're going to move it above the text and instantly

19
00:01:31,010 --> 00:01:35,540
the icon will be at the top for mobile.

20
00:01:35,840 --> 00:01:41,960
And as soon as Jay has been catches up with the code it will show that.

21
00:01:42,080 --> 00:01:51,140
However on the full screen what page the icon will now be aligned to the left of the screen.

22
00:01:51,230 --> 00:01:58,040
So in order to align it to the right of the screen what we're going to do is add media queries in CFS

23
00:01:59,090 --> 00:02:07,180
so you can use media queries in CFS to change how the web page looks on a larger screen.

24
00:02:07,190 --> 00:02:10,730
So first we're going to set up a media query to set up a media query.

25
00:02:10,730 --> 00:02:22,490
You call the at or Ampersand symbol and you type media then you can specify the minimum width that will

26
00:02:22,820 --> 00:02:31,400
contain all the code containing the CFS that should be applied based on a minimum with.

27
00:02:31,430 --> 00:02:37,550
So we're going to set men with 2 700 pixels.

28
00:02:37,550 --> 00:02:45,230
So that means whenever a screen is 700 pixels or larger then we're going to apply the specified code

29
00:02:45,230 --> 00:02:46,330
inside to it.

30
00:02:46,490 --> 00:02:53,340
And this will override any default code that was there before the men with seven pixels.

31
00:02:53,360 --> 00:02:59,930
So what we're going to do is we're going to take our entire block which is Block 2 and we're going to

32
00:02:59,990 --> 00:03:01,850
change its styling.

33
00:03:02,030 --> 00:03:09,440
So in order to change the styling of an element inside of a media query you call it just like you would

34
00:03:09,530 --> 00:03:12,280
outside of the media query but you put it inside.

35
00:03:12,710 --> 00:03:19,550
So any styling in here will not be applied to block 2 until the screen size is seven hundred pixels.

36
00:03:19,550 --> 00:03:24,790
So I'm going to set the display to flex in block 2.

37
00:03:24,800 --> 00:03:31,780
Now this means that block 2 will now be flex flex is known as a flex box.

38
00:03:31,820 --> 00:03:35,940
And this will help you create rows on your screen.

39
00:03:36,020 --> 00:03:42,320
So every time you make an element like block 2 to be display flex it means that the element is now a

40
00:03:42,320 --> 00:03:43,290
row.

41
00:03:43,400 --> 00:03:50,000
And why are we using display flex because flex is similar to bootstrap in that it applies automatic

42
00:03:50,000 --> 00:03:50,590
styling.

43
00:03:50,600 --> 00:03:53,510
So it makes a role for us.

44
00:03:53,510 --> 00:03:58,390
Now we're going to change the Flex direction to be a role.

45
00:03:58,400 --> 00:04:01,010
We're going to specify that OUTFRONT upfront.

46
00:04:01,010 --> 00:04:09,260
That way we can see immediately and make sure that it's a row because the other option is to make it

47
00:04:09,260 --> 00:04:09,980
a column.

48
00:04:10,070 --> 00:04:17,150
But if we had a column then every item in the block would be stacked on top of each other because every

49
00:04:17,150 --> 00:04:22,460
item in a flex row is considered to be one item in the row.

50
00:04:22,460 --> 00:04:31,310
So one column if it is a row and if it's a column direction then that means that every item is treated

51
00:04:31,340 --> 00:04:31,910
as a row.

52
00:04:32,510 --> 00:04:35,660
So now we have flex direction row.

53
00:04:35,660 --> 00:04:41,230
Next we're going to do is we're going to assign the order of each element to be changed.

54
00:04:41,630 --> 00:04:48,910
If the width is a larger screen size so we're going to have responsive order.

55
00:04:49,010 --> 00:04:56,120
And this means that the order will be changed and this order is going to be one and then the other order.

56
00:04:56,150 --> 00:04:58,900
So we can actually change it to first order.

57
00:04:59,240 --> 00:05:00,170
The second order

58
00:05:02,670 --> 00:05:04,570
responsive.

59
00:05:05,550 --> 00:05:07,730
This order will be too.

60
00:05:07,770 --> 00:05:15,870
So that means that whenever the screen size is large so greater than seven hundred or equal to seven

61
00:05:15,870 --> 00:05:20,940
hundred then we are going to have the order of this element B one in the order of this almond to be

62
00:05:20,940 --> 00:05:21,850
two.

63
00:05:21,870 --> 00:05:26,870
And we're going to assign this to be our icon and this to be our text.

64
00:05:27,000 --> 00:05:29,480
And this way it will flip the current order.

65
00:05:29,790 --> 00:05:34,750
So let's copy first order responsive and come over here to our text where we have our second feature

66
00:05:34,750 --> 00:05:45,210
right down here and let's apply first order responsive as the class of our text down here in this column

67
00:05:45,210 --> 00:05:49,200
we're going to add first order responsive and in the icon we're gonna add.

68
00:05:49,200 --> 00:05:51,410
Second order responsive.

69
00:05:51,510 --> 00:05:57,900
Now by default you will not see any changes because you must add one more thing to the CFS here and

70
00:05:57,900 --> 00:05:59,540
that is screen only.

71
00:05:59,550 --> 00:06:07,710
And now this will help your media query to check for the screen only.

72
00:06:07,710 --> 00:06:10,820
And then you specify the width of the screen.

73
00:06:10,830 --> 00:06:18,690
Now if you go to the output and you toggle the CFS then you scroll down you'll see the order of the

74
00:06:18,690 --> 00:06:19,780
icons has flipped.

75
00:06:21,060 --> 00:06:30,360
If you open up the ECMO tab again then you'll see that this is the default code where the order is one

76
00:06:30,360 --> 00:06:38,450
for each icon by default because we placed the code for the icon above the code for the text.

77
00:06:38,700 --> 00:06:44,370
And then when you toggle the EU out to see the full screen version on a website on a much larger screen

78
00:06:44,370 --> 00:06:45,260
size.

79
00:06:45,480 --> 00:06:50,840
Now you can see the order has reversed all thanks to these media query that we made up here.

80
00:06:50,850 --> 00:06:53,570
Just as one only made one so far.

81
00:06:53,580 --> 00:06:59,090
We can make more media queries for different screen sizes you would just have to add another block just

82
00:06:59,090 --> 00:07:05,910
like this with the different men with men with means that the minimum with must be seven hundred for

83
00:07:05,910 --> 00:07:14,070
this code to apply for the CSF styling change to this and this will override the default styling.

84
00:07:14,670 --> 00:07:14,960
Okay.

85
00:07:14,970 --> 00:07:16,490
Thank you for watching everyone.

86
00:07:16,500 --> 00:07:21,870
You just learned how to make your columns responsive using media queries which will change the order

87
00:07:21,870 --> 00:07:23,030
of elements.

88
00:07:23,040 --> 00:07:33,110
You also briefly learned about flex box which is an extremely useful styling tool similar to bootstrap.

89
00:07:33,120 --> 00:07:36,620
However it's not a library that you have to import.

90
00:07:37,050 --> 00:07:38,360
Similar to flex box.

91
00:07:38,430 --> 00:07:40,750
I also encourage you to look into grid if you haven't already.

92
00:07:40,860 --> 00:07:45,560
But that is extra credit because we are not covering flex or grid in this course.

93
00:07:45,720 --> 00:07:52,290
They are more styling tools that will help you style such as we have seen so far.

94
00:07:52,290 --> 00:08:01,350
You can use flex to change the direction of elements in a column and rope and because you're working

95
00:08:01,350 --> 00:08:07,890
with columns and rows for this specific section of the page flex box came in handy to help with the

96
00:08:07,890 --> 00:08:09,470
responsiblity.

97
00:08:09,480 --> 00:08:12,020
Thank you everyone for watching and we will see you in the next lecture.

98
00:08:12,120 --> 00:08:15,150
Where we're going to be continuing adding more pages to this project.

99
00:08:15,200 --> 00:08:15,720
See you there.