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

2
00:00:06,610 --> 00:00:12,610
Now in the previous lecture we set up three feature sets containing information and icons for three

3
00:00:12,610 --> 00:00:13,970
different services.

4
00:00:13,970 --> 00:00:18,820
And in this lecture we're going to be troubleshooting to actually show the truth because so far we can

5
00:00:18,820 --> 00:00:19,960
only see one.

6
00:00:19,990 --> 00:00:25,210
So this is an issue with just has been sometimes the lag for edits will be slow so you'll have your

7
00:00:25,210 --> 00:00:26,220
code fine.

8
00:00:26,290 --> 00:00:31,510
But the the output will not have caught up with the code.

9
00:00:31,510 --> 00:00:38,170
So what you can do is just take your first block of code to your first feature and whenever you have

10
00:00:38,230 --> 00:00:42,540
a problem take the data that's giving you an issue.

11
00:00:42,540 --> 00:00:44,500
So for example the gift is the only one showing up.

12
00:00:44,500 --> 00:00:48,080
We're going to try and cut that and then paste it back in.

13
00:00:48,160 --> 00:00:56,560
And this way the output will check again and it will catch up and as you can see you will now see all

14
00:00:56,590 --> 00:01:03,010
three of these pages in the console or in the output rather the console will contain information that

15
00:01:03,010 --> 00:01:03,640
we log.

16
00:01:04,030 --> 00:01:09,950
So this is for the developer to see but the output is what the client will see the user of the Web site.

17
00:01:10,300 --> 00:01:10,630
OK.

18
00:01:10,660 --> 00:01:10,870
Great.

19
00:01:10,870 --> 00:01:13,240
So now we're seeing are three different pages.

20
00:01:13,240 --> 00:01:15,940
If you were using an ITC you wouldn't have this issue.

21
00:01:15,940 --> 00:01:18,650
This is just with the lag objects spin.

22
00:01:18,790 --> 00:01:20,010
OK.

23
00:01:20,290 --> 00:01:23,880
So if you ever have an issue like that don't get too frustrated.

24
00:01:23,890 --> 00:01:27,040
It's very important to learn how to troubleshoot errors.

25
00:01:27,460 --> 00:01:30,810
And that is one error that you can troubleshoot.

26
00:01:30,820 --> 00:01:31,060
OK.

27
00:01:31,090 --> 00:01:33,770
So now you know how to troubleshoot that error.

28
00:01:33,790 --> 00:01:38,650
Let's go ahead and fix a bit of this alignment because remember we are designing mobile first which

29
00:01:38,650 --> 00:01:40,960
means we're going to be thinking about this small screen first.

30
00:01:40,960 --> 00:01:46,570
That's why we have this navigation setup so nice and designing mobile first means you consider the small

31
00:01:46,570 --> 00:01:47,730
screen first.

32
00:01:47,860 --> 00:01:49,720
Consider the small screen user first.

33
00:01:49,750 --> 00:01:58,210
So the issue I'm seeing here now is that the items are being aligned to the left too much.

34
00:01:58,210 --> 00:02:03,310
So what I want to do is center the icons that way the image will be centered.

35
00:02:03,340 --> 00:02:05,920
When you fill this in with an image.

36
00:02:05,920 --> 00:02:13,540
So to do that when I had the output for now and I'm going to go ahead and add the text center class

37
00:02:13,870 --> 00:02:15,130
to my icon here.

38
00:02:15,130 --> 00:02:18,290
So I have the div here that contains the column.

39
00:02:18,380 --> 00:02:25,600
Now I'm going to write text center to center all the content in here even on SPG is not text.

40
00:02:25,750 --> 00:02:27,460
Text center will still center it.

41
00:02:27,470 --> 00:02:32,410
So let's look at the output again and you will see that gift should center.

42
00:02:33,030 --> 00:02:34,170
OK.

43
00:02:34,510 --> 00:02:39,840
And go ahead and test this on the other class.

44
00:02:39,960 --> 00:02:43,780
There appears to be a lag with just been perhaps servers are down.

45
00:02:44,500 --> 00:02:45,470
OK.

46
00:02:45,790 --> 00:02:50,200
So you can either put it in there but it looks like it wants it to be up here.

47
00:02:50,200 --> 00:02:50,370
OK.

48
00:02:50,370 --> 00:02:53,360
So put it up here in the row for the feature set.

49
00:02:53,410 --> 00:03:00,910
This will center all of the text as well and you can go ahead and copy that for each of the feature

50
00:03:00,910 --> 00:03:01,530
ads.

51
00:03:01,660 --> 00:03:04,900
Now usually it would work on this is going to test that again.

52
00:03:05,050 --> 00:03:08,750
See how that goes.

53
00:03:08,770 --> 00:03:11,820
Again you're getting a lag so I'm just gonna wait for it to catch up.

54
00:03:11,960 --> 00:03:12,170
Okay.

55
00:03:12,200 --> 00:03:12,460
Yes.

56
00:03:12,460 --> 00:03:13,880
That was just the lag.

57
00:03:13,960 --> 00:03:22,030
You can put the text centering on the icon if you want to center the icon itself.

58
00:03:22,180 --> 00:03:27,670
If you want to center the text as well then you can add the text center to the entire feature right

59
00:03:28,510 --> 00:03:30,740
now because we're designing mobile first.

60
00:03:30,760 --> 00:03:34,450
It would probably look better if the text was centered.

61
00:03:35,440 --> 00:03:40,120
However it is easier to read when text is left aligned so I'm going to leave the text left aligned and

62
00:03:40,120 --> 00:03:45,100
the icon centered because this text will be easier to read especially if you add more text.

63
00:03:45,100 --> 00:03:48,610
Let's go ahead and also center all the other icons.

64
00:03:48,850 --> 00:03:50,440
So we have the eye here.

65
00:03:50,440 --> 00:03:54,520
We're going to add text center to this as well as the controller.

66
00:03:54,520 --> 00:03:59,900
We're going to add text center to the controller column as well.

67
00:04:00,140 --> 00:04:00,580
Okay great.

68
00:04:00,640 --> 00:04:08,220
Let's look an output now and we can see all the icons will be centered as soon as Jasmine gets up.

69
00:04:08,710 --> 00:04:13,260
You might see some lag with Jasmine if you have Internet issues as well.

70
00:04:13,300 --> 00:04:15,220
That's why I highly recommend getting an idea.

71
00:04:15,370 --> 00:04:20,440
But for accessibility purposes to spend is very easy to just quickly set up and test something.

72
00:04:20,440 --> 00:04:21,520
OK great.

73
00:04:21,520 --> 00:04:26,650
So that will center our icons and because we're thinking mobile first.

74
00:04:26,680 --> 00:04:35,050
Typically when you're on a Web site then you would have the icon be on the left and then the next icon

75
00:04:35,050 --> 00:04:36,720
be on the right and the icon be on the left.

76
00:04:37,000 --> 00:04:43,030
But when this translates to mobile you'll see that it leads to a bit of confusion because we have an

77
00:04:43,060 --> 00:04:45,980
icon of that paragraph and then we have a paragraph again.

78
00:04:46,000 --> 00:04:55,420
So what I'm going to do in the next lecture is I'm going to enable the the Web site to switch the positioning

79
00:04:55,540 --> 00:04:58,030
of the icon when it's on mobile.

80
00:04:58,030 --> 00:05:05,650
So that way the icons will all be at the top on mobile but on a Web site computer.

81
00:05:05,650 --> 00:05:12,280
So on a computer on a larger screen just such as an iPad as well maybe then I'm going to have it be

82
00:05:12,880 --> 00:05:15,640
aligned with this left right zigzag pattern.

83
00:05:15,640 --> 00:05:18,470
So that is going to be what's known as responsively.

84
00:05:18,520 --> 00:05:22,620
We're going to use media queries which sound more complex than they are.

85
00:05:22,660 --> 00:05:33,010
We're going to use some CFS media queries to specify the positioning based on the screen size.

86
00:05:33,010 --> 00:05:33,580
Other than that.

87
00:05:33,580 --> 00:05:34,540
Thank you all for watching.

88
00:05:34,540 --> 00:05:41,290
You now have displayed the feature it's here and you've also fixed the alignment for mobile because

89
00:05:41,300 --> 00:05:49,180
Amber thinking about mobile users and with the central alignment it will be a lot more user friendly

90
00:05:49,180 --> 00:05:53,290
so make sure you add this text center to each of our icons here.

91
00:05:53,980 --> 00:05:54,460
Other than that.

92
00:05:54,460 --> 00:05:56,850
Thank you all for watching and we will see you in the next lecture.