Hello everyone and welcome back to our bootstrap course.
Now in the previous lecture we set up three feature sets containing information and icons for three
different services.
And in this lecture we're going to be troubleshooting to actually show the truth because so far we can
only see one.
So this is an issue with just has been sometimes the lag for edits will be slow so you'll have your
code fine.
But the the output will not have caught up with the code.
So what you can do is just take your first block of code to your first feature and whenever you have
a problem take the data that's giving you an issue.
So for example the gift is the only one showing up.
We're going to try and cut that and then paste it back in.
And this way the output will check again and it will catch up and as you can see you will now see all
three of these pages in the console or in the output rather the console will contain information that
we log.
So this is for the developer to see but the output is what the client will see the user of the Web site.
OK.
Great.
So now we're seeing are three different pages.
If you were using an ITC you wouldn't have this issue.
This is just with the lag objects spin.
OK.
So if you ever have an issue like that don't get too frustrated.
It's very important to learn how to troubleshoot errors.
And that is one error that you can troubleshoot.
OK.
So now you know how to troubleshoot that error.
Let's go ahead and fix a bit of this alignment because remember we are designing mobile first which
means we're going to be thinking about this small screen first.
That's why we have this navigation setup so nice and designing mobile first means you consider the small
screen first.
Consider the small screen user first.
So the issue I'm seeing here now is that the items are being aligned to the left too much.
So what I want to do is center the icons that way the image will be centered.
When you fill this in with an image.
So to do that when I had the output for now and I'm going to go ahead and add the text center class
to my icon here.
So I have the div here that contains the column.
Now I'm going to write text center to center all the content in here even on SPG is not text.
Text center will still center it.
So let's look at the output again and you will see that gift should center.
OK.
And go ahead and test this on the other class.
There appears to be a lag with just been perhaps servers are down.
OK.
So you can either put it in there but it looks like it wants it to be up here.
OK.
So put it up here in the row for the feature set.
This will center all of the text as well and you can go ahead and copy that for each of the feature
ads.
Now usually it would work on this is going to test that again.
See how that goes.
Again you're getting a lag so I'm just gonna wait for it to catch up.
Okay.
Yes.
That was just the lag.
You can put the text centering on the icon if you want to center the icon itself.
If you want to center the text as well then you can add the text center to the entire feature right
now because we're designing mobile first.
It would probably look better if the text was centered.
However it is easier to read when text is left aligned so I'm going to leave the text left aligned and
the icon centered because this text will be easier to read especially if you add more text.
Let's go ahead and also center all the other icons.
So we have the eye here.
We're going to add text center to this as well as the controller.
We're going to add text center to the controller column as well.
Okay great.
Let's look an output now and we can see all the icons will be centered as soon as Jasmine gets up.
You might see some lag with Jasmine if you have Internet issues as well.
That's why I highly recommend getting an idea.
But for accessibility purposes to spend is very easy to just quickly set up and test something.
OK great.
So that will center our icons and because we're thinking mobile first.
Typically when you're on a Web site then you would have the icon be on the left and then the next icon
be on the right and the icon be on the left.
But when this translates to mobile you'll see that it leads to a bit of confusion because we have an
icon of that paragraph and then we have a paragraph again.
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
of the icon when it's on mobile.
So that way the icons will all be at the top on mobile but on a Web site computer.
So on a computer on a larger screen just such as an iPad as well maybe then I'm going to have it be
aligned with this left right zigzag pattern.
So that is going to be what's known as responsively.
We're going to use media queries which sound more complex than they are.
We're going to use some CFS media queries to specify the positioning based on the screen size.
Other than that.
Thank you all for watching.
You now have displayed the feature it's here and you've also fixed the alignment for mobile because
Amber thinking about mobile users and with the central alignment it will be a lot more user friendly
so make sure you add this text center to each of our icons here.
Other than that.
Thank you all for watching and we will see you in the next lecture.