Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Web Typography!
You have completed Web Typography!
Preview
We’ll hone in the design by testing and adjusting it responsively. This will include changing sizes, measure, and arrangement to find what works best for different screen sizes.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We're almost there.
0:00
Our design is looking good on our desktop,
but
0:01
we need to make sure it works well at
other browser sizes.
0:03
Through media queries, we'll focus on how
to make our design and
0:06
typography bulletproof no matter what size
screen you're on.
0:09
I didn't want for us to responsively
design each section as we went, as we'll
0:14
first wanna make major adjustments with
our body font size at different sizes.
0:18
This will adjust every piece of text at
that size.
0:23
Then, we'll want to go and adjust our
typography as needed after that happens.
0:26
We'll start by beginning to drag our
browser inward.
0:31
One of the things we want to pay closest
attention to here is out measure as it
0:35
will determine when you make responsive
break points as I drag the browser inward.
0:39
At about 1024 pixels,
0:45
we're noticing our columns are getting
somewhat tight around this browser size.
0:48
So, I'm gonna go into our CSS and with our
media query here with the max width of 64
0:53
em or 1024 pixels, we'll adjust the body
font size to be 1.125 em or 16 pixels.
0:59
Let's save and see how that looks, now.
1:07
Great.
1:09
So, our column measure is looking a lot
better here but
1:10
a few things have also changed in the
design.
1:13
We see now our measure for our one columns
need adjusting and
1:15
our summary class could use a bit of
balance up here.
1:20
So, i'll go into our css and for
1:23
our summary I'll set a max width of 40
rem, as that will balance it out.
1:25
And then, I'll set a max width for all our
columns, h3s, and ps to be 27.5 rem.
1:32
[BLANK_AUDIO]
1:38
So, let's check out the change.
1:44
Great.
1:46
Our summary here is much more balanced
with this sentence coming first and
1:46
then the following sentence coming on the
next line, and
1:50
then our measure down here for our columns
is much more comfortable.
1:53
All right.
So,
1:57
as I drag the window in again, at around
the 864 pixel mark we could
1:58
use another decrease in font size because
our column measure is getting tight again.
2:02
This will also help our h1 to not break
into another line.
2:07
So, in our CSS with a max width of 54m or
2:12
864 pixels we'll begin to implement some
changes.
2:17
I'm going to change our body font size
down to 1m or 16 pixels, and
2:21
then I'm going to adjust the max width of
our summary to keep it in balance.
2:26
Let's go look at that now.
2:31
Cool.
2:33
So, our text has shrunken as a whole
because our body's font size has changed.
2:34
And, our summary is still balanced and
2:38
it still looks like we have a nice measure
for our columns here.
2:40
As I continue to scale it downwards we
notice that at the 752
2:44
pixel mark our header is breaking to the
next line.
2:48
Since we only have access to CSS we cannot
implement something like fig text JS,
2:51
which automatically sizes our titles based
on our browser size.
2:57
Also, we wouldn't wanna implement the
viewport width unit of
3:01
measure in CSS because it's not super
reliable across different browsers.
3:04
So, we'll wanna manually adjust our header
at this break point.
3:09
I'll head over to our CSS, and with our
media query of max width 47m,
3:12
which is relative to 752 pixels.
3:17
We'll change our header to have a font
size of 4.5m, and
3:20
our h2 to 1.333m, which is our next size
down in our scale.
3:27
Let's check out what that's looking like
now.
3:34
Nice, much better.
3:37
It keeps our proportions intact there.
3:38
But, notice now down here our columns are
really tight.
3:40
So, this seems like a good point to switch
our two column layout into a one
3:43
column layout.
3:47
To do that, I'll simply set our
explanation and
3:48
participation classes, which are our two
columns, to have a width of 100%.
3:51
So now, they span across the browser.
3:55
And, re-adjust the padding to be 4 em and
3:58
6% to match the padding of our other
sections at this size.
4:00
Let's check out how that looks.
4:04
Great.
4:08
This keeps the content flow fairly simple
and clear for smaller sizes.
4:08
I'm going to go in and remove these
asterixs as they are no longer needed.
4:13
[SOUND] I'm also going to remove where we
commented
4:16
out our base hold dot IT as it's no longer
necessary.
4:24
And.
this will bring our HTML back to
4:32
it's original state.
4:34
We'll save that.
4:35
And then, check out how it's looking.
4:37
So, I'll refresh it one more time, and now
our asterisks are gone.
4:39
And, we'll begin to drag in our browser,
and it's looking good here, and
4:43
then finally, at about 544 pixels we're
seeing a break happen there.
4:47
So, I'm going to want to go in and
4:54
set one more max-width media query for
these small sizes.
4:56
So, with our media query at 34 em or
5:01
544 pixels, we wanna start to change some
things.
5:05
I don't wanna change our overall body font
size as I
5:08
don't want it to be less than 16 pixels.
5:11
So, we'll go in and change sizes
individually as needed.
5:13
For our header, I'll first give it a
padding of 6M and four percent.
5:17
This change to the top and bottom padding
will remove some of
5:21
the white space that's a bit much at this
small of a size.
5:25
We'll also wanna change our header in H1
to a font size of 2.6m, so
5:28
it's a bit smaller.
5:33
And, a line height of 0.8 just in case,
5:34
it breaks to two lines on extra small
screens.
5:36
We'll then set our H2 to a font size of 1m
to keep it smaller than our main title.
5:39
And, we'll adjust our letter spacing to
.2m,
5:45
as it was a bit too long with wider letter
spacing.
5:48
Lastly, we'll give it just a bit of space
from our h1
5:52
by adding some top margin of .3m.
5:54
Let's save and check that out.
5:57
Great.
6:04
So, the size of our man title and tagline
feel a lot more appropriate for
6:04
smaller sized screens.
6:09
Our summary and H3's now feel a bit big os
i'll go in and fix those.
6:11
I'll start by targeting our summary class
paragraphs and
6:17
setting them at a font size of one m.
6:20
A line height of 1.6 and a max width of
27.5 [UNKNOWN] to keep it balanced.
6:25
This is utilizing similar values that we
are using for our columns.
6:31
I'll then set my summary p plus p to be
just a bit smaller with
6:37
a font size of 0.9m.
6:41
Finally, I want my h3s to be a step down
on our scale.
6:43
So, we'll go for 1.333m.
6:46
Good.
So,
6:52
the content feels much more reasonable for
6:53
the smaller sizes, but it still retains
the overall hierarchy and flow.
6:55
Lastly let's look at our side content at
the bottom.
7:01
At this media query, it will be smart to
break them into one column as the two
7:04
are closing in on one another's space.
7:08
So, what we want to happen is the right
column will fall under the left and
7:11
everything will remain centered.
7:14
To do that, let's head over to our CSS and
style it out.
7:16
We'll do this in our CSS by targeting our
design selection class and
7:20
giving it a width of 100%.
7:25
So, we'll now take up the full browser
width.
7:26
And then, we'll remove the border right by
setting it to none,
7:29
as it's no longer needed and I'll set the
padding to 0 for the top and bottom.
7:32
And, 3% for the left and right, just to
retain some amount of space there.
7:36
Instead of that border on the right side,
I would like to implement a bottom border
7:41
here in the same style to split this
section from the one below it.
7:45
So, I'll target our design selection class
LI:last-of-type.
7:49
So, that's the last link in our list.
7:53
And, give it a bottom border, one pixel
solid with the same blue we were using and
7:55
a padding bottom of three m to give it
some space.
7:59
Now, for our design archives class I'll
give it some top padding of
8:05
the same amount and then set the width to
100%.
8:08
And finally, I'll set the width of our zen
resources class to also be 100%.
8:12
Let's save and now check this out.
8:18
[BLANK_AUDIO]
8:19
Great.
8:28
The break happens just in time before our
columns close in on one another.
8:28
And, our vertical spacing here looks good.
8:33
The bottom border also really helps
separate these two sections
8:35
as the browser continues to close in, our
contents still looks good.
8:40
I also recommend testing this on the
actual devices too to
8:44
make sure your content is flowing well.
8:47
Great.
8:51
So, we're set for a max-width media
queries.
8:51
In the next video, we're look into a few
more polishing touches we
8:54
can put on the design to bring it to a
final state.
8:57
To challenge yourself for extra credit,
see if you
9:02
can style out our aside content to behave
like this for larger size screens.
9:04
It was at the bottom of the page and now
we've moved it to working as a top drawer.
9:09
In the beginning of the next video, I'll
explain how it's accomplished.
9:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up