Okay, it's time to improve our home town app.
I'll go ahead and start with the meta tag for the viewport.
On the left, I've got the code that you started with, and
on the right, I've got my modifications.
I added the meta tag with the name viewport, and then I
set the content to width equals device width and the initial scale equals 1.
Okay, well, that wasn't too hard.
Let's see what's next.
Now I need to make some adjustments to my CSS and
markup so that everything fits in a single column.
I'll be sure to use relative widths.
To do so I'm going to open up a page in DevTools and make my changes there.
Here's the page in its original state.
And now, I've got DevTools open.
One of the cool features of DevTools is that when I hover over elements in
the Elements pane, I can also see them selected on the page.
That's pretty helpful.
When I'm hovering over the header here,
I can see that the header takes up the entire width of the viewport.
So that seems pretty responsive, but I want to check out what's inside it.
hah.
Inside it I see this header inner element.
And that's not taking up the entire viewport like we want it.
I think I might need to make a change.
On the right hand side I can see header inner CSS, and
it's width is set to a fixed 800 pixels.
That's not right.
I double click to change it.
And we'll change it to 100%.
Great.
Now, when I hover over it,
I see that the header inner is the entire width of the viewport.
So far, so good.
Coming down on the page, we come up to the nav.
And when it's selected,
it's pretty clear that it's not the whole viewport width.
On the right side, we can see its CSS.
And the width is set to a fixed 800 pixels.
Just like before, I'll set its width to 100%.
And now when I select it,
it looks pretty clear that the nav is now taking up the full viewport width.
The header and the nav are looking good, I'll come down to main, and once again
we can see that main is set to a fixed width of 800 pixels, now with a width of
100%, I can see that the main is taking up the entire width of the viewport.
Nice, and side main content looks good, it looks like it's taking up
the full viewport but I want to take a look inside too.
And now I see the different sections on the page and there's the hero.
Now the hero seems to be of a fixed width.
There's a lot of space on the side it could take up, but it's not.
So I want to make a change.
Its width is set to a fixed 480 pixels.
And when I change it to 100%, we see it take up the full viewport,
just like we wanted.
Looking down in the dom I see the top news section, so I'll click on that.
And once again it's obvious that the fixed width should be 100%,
or some other percentage, and not this fixed width.
Okay.
And now the top news takes up the entire width of the viewport.
That's good.
I have to scroll down a little bit and then I see sports.
And the scores aren't taking up the full viewport.
If I click on it, I can see pretty clearly why right here.
So once again, 100%.
And now the scores take up the full viewport, not too bad.
This says push the poor weather section down really low and
we've got all this open space to work with.
So I want to make sure it takes it up.
The width right now is fixed at 320 pixels.
I can change that to 100%, and now the weather takes up the full viewport.
Very nice. And lastly, the recent new
section is already taking up the full viewport so, hey, not too bad.
Don't have to do anything there.
Step 1 and Step 2 are done.
For Step 3, I want to make sure my touch targets are easy to hit.
This means that I want my a tags to be at least 48 by 48 pixels.
A tags, remember, are going to be the touch targets,
because the As are the links.
To do so, I went through the CSS.
On the left there's what I started with, and
on the right there's what I ended up with, and I went ahead and
added a padding to the a tag inside the nav class.
I set the padding to 1.5em.
Which means that the padding is equivalent to 1.5 times the font
size of the a tag.
If I open up DevTools and check out what I've done, I can see that the a tag here
has a nice box around it and its width is 69 pixels and its height is 54, which
means that it's bigger than the 48 by 48 I was shooting for, that works for me.
Farther down in the page, I see the top news item with an A tag and
I went ahead and set it's padding to 1.5em as well.
Then I added the second one, inherit here, that's going to be the left and
the right padding.
And it's inheriting the padding from the item that is its container.
With DevTools open it's pretty clear the touch target there is great.
Good.
Let's move on.
There's another A tag inside the snippet title class.
So once again we'll set its padding to 1.5em.
And then of course one last time at the bottom of
the page there's an a tag in the footer so, one more change to the padding.
Let's take a look at the page in its full glory.
The page looks really good on mobile.
I can scroll up and down and
see that all of the content fits the viewport width we've got here.
Of course, if the page gets a lot wider,
then things start to get a little ridiculous, but that's okay.
Now just to be clear, when you start comparing your CSS to our CSS,
you might actually see some differences between them.
And that's okay, there is more than one way to solve this problem.
And in fact, the CSS that I ended up with in my main .css file,
is actually slightly different than the changes I made inside DevTools.
DevTools are a great place to start, but of course in the end,
you need to make your changes to code.
And I well, made a few changes.