So far in this course we’ve built out a
heroes section, navigation, an entire project section (driven by visual CMS), a contact
form, and footer. And, we’re going to take all of this and
ensure it’s both responsive and fluid on all different devices. We’ll do this on desktop, tablet, mobile
landscape, mobile portrait, and we’ll add a larger breakpoint for devices like the iMac
or the Pro Display XDR, and on other larger displays. Let’s start with desktop. Up here this is our base breakpoint, this
is the default breakpoint from which we design everything else. We can grab the edge right here and test fluidity,
see how everything’s responding. And something to note right away, we created
that custom container, and that custom container, which has the container class, has a maximum
width of twelve hundred, and that works pretty well. But things get really close to the edge here,
so what we might want to do is add some padding. Let’s say twenty pixels on both sides, so
that it’s not going right up to the edge. In fact if we want it squared off, we might
want to make it thirty pixels on each side. Now if we test responsiveness, if we test
fluidity, it looks like it works on all different widths. We can see right here this is the iPad Pro,
the twelve point nine inch, we can widen here, this is the Retina Macbook, the twelve inch,
or the earlier Macbook Pro, twelves at the bottom, over here is Macbook Air eleven inch,
this is Macbook Pro the earlier fifteens, and this is the Macbook Pro thirteen and the
Macbook Air thirteen inch models. Looks good on all these widths. Let’s scroll down, let’s see how these
are performing. They look pretty good. Let’s check our contact form and our footer. All of it seems to be working great on all
of these widths. Let’s move on to tablet, and just by glancing
at it, tablet actually looks okay. We might want to adjust the section, that
sixty pixels on the top and bottom with that more limited real estate, might want to drop
that to maybe thirty pixels on the top and bottom. Let’s do that, see how this responds. Looks pretty good here. We can see that by default our nav bar has
switched to dropdown navigation, so let’s go into preview mode, and let’s click that
little hamburger menu. And we might not love this color. So let’s click out of preview mode. Let’s double-click, we’re going to edit
our symbol, let’s click the menu button. We can go over to our element settings, and
we can open that menu. And with our menu button selected, let’s
make it a different color. Let’s say black, but we can choose any color
we want here. Black looks pretty good. And let’s select our nav links. Again, we have two different classes here,
we have the nav link and then we have the nav link button class. So we might want to make them more even. So let’s say the padding on the top and
bottom, let’s make it ten pixels on the top and bottom and the nav link, same thing,
ten pixels on the top and bottom. And there’s some space here, so if we click
that nav link we still have that margin on the top. Let’s remove that and let’s change the
nav link color here. Also let’s just do black. That looks pretty good. The second one here, let’s change that to
black. Remember, we're affecting the combo class
(that’s Navlink AND Button). It's grayed out right now, but that's because
it's carrying over that opacity we did when we were styling on the base breakpoint, when
we first made it. Let's bring that all the way up, so it's a
solid black color. And we’re still getting that rounding, so
let’s turn off that rounding. Now it should work okay. We should be able to go in here, trigger that
open menu, close menu. Open menu, close menu. That seems to be responding just fine. So, tablet, how are we doing with responsiveness
and fluidity? We’re looking pretty good on each of these. Even as it gets more narrow, it’s looking
pretty good. This form looks great. This footer looks great. That’s tablet. Let’s move on to mobile landscape. Things are getting a little tighter on mobile
landscape. Let’s maybe decrease this heading. So decrease this size, let’s make it twenty-four,
maybe a little higher, thirty. And decrease our line height, let’s use
unitless, and let’s choose something like one point one. That looks pretty good there. The container seems to have some space underneath. Is it that heading? Yeah that sixty pixels. Let’s make that thirty. And now, if we go back here, we can see even
-- well we do want to change that, the heading here still had the sixty, let’s change that
to thirty -- but even as we make changes to these smaller breakpoints, notice how they’re
not affecting, we made the heading size thirty, but that didn’t affect the tablet. That’s because changes start on the base
breakpoint, and they cascade down to smaller devices, and they cascade up to smaller devices. So a change we make on tablet will affect
mobile landscape, but a change we make on mobile landscape won’t affect tablet or
desktop. So we’re on mobile landscape, this is looking
pretty good. There’s a lot of space here. Maybe this section, thirty is a little tight,
let’s maybe make that fifteen. Decrease the H2 size since we decreased the
other one. That looks a little better, twenty-two, maybe
on this we can decrease that a little more. That looks good. We can actually select our paragraph, maybe
we want that a little tighter as well. Maybe thirteen pixels. We do that here as well. You know these side by sides might not work. We can notice that even over here, if these
things are getting too narrow, you don’t see it that much on tablet. Here’s the question: what’s going on here? Why are each of these images clipped off? Well, if we go back to desktop, you’ll notice
we never actually set a height here. The height is being determined by the image
inside. So if we make these widths two hundred pixels,
notice how it’s actually clipping everything off. In order to do this properly, we might want
to make a different change. We might want to select this image element,
and make its width one hundred percent, and its height one hundred percent. And right now it’s a little squished, but
its respecting the content on the page. Here’s what that means. Let’s add some extra content. Notice how as we add more paragraphs, it’s
stretching, the image is stretching to take up the space that’s created by all this
extra text, and as we undo that it squishes down. One thing we can do with this image selected
is we can set it’s cover, it’s fit to cover. And now it’s going to clip off and respect
those dimensions. So how do we set a different dimension? How do we set these to be a little bit taller? We can just go in, and select the project
details div block here, and we can set it’s height to something like, let’s do minimum
height so it doesn’t clip anything off, let’s set it to five hundred pixels. That’s looking pretty good. And here’s what that did in mobile. Notice how now, that side by side, it’s
still clipped off but it’s no longer shrinking that image. That image is always taking up the space inside
the grid. And that’s being determined by this div
block. Let’s go back to tablet, maybe we want to
make this three hundred. That looks pretty good. Let’s go to mobile landscape, and in mobile
landscape, we might not like the side by side design. It looks pretty good here. Maybe we want to make it half and half. So let’s create one, let’s make this 1FR. Let’s see what a side by side looks like. That looks pretty good. Let’s see. As we resize, this looks pretty good on mobile
landscape. Let’s try mobile portrait. Okay, it’s a little too tight here. Let’s go in and edit our grid, and let’s
remove that second column. But where did our image go? We set its width and its height to 100%. And because we REMOVED that second column,
we're left with a 1 by 1 grid. But we have this invisible row here that contains
our image, right now it has 0 pixels of height. So the image is taking up 100% of those 0
pixels. So now, let’s change a minimum height, let’s
say two hundred pixels, now we can see the images again. Let’s go in, let’s maybe remove that spacing
here. This is looking pretty good. So we have each card, maybe we can decrease
this minimum height, just remove that minimum height, let’s just do auto. That's looking pretty good. Maybe we can push off the button text here. Let’s push off on the top, create fifteen
pixels of space. This is looking pretty good. Each project has its image, and its description. Let's check our contact form, and our footer. Too tight here as well. Let’s go into contact form, that grid we
created before, let’s remove that column. So now we have everything that should stack
nicely. Let’s escape, contact form looks okay. What about this Megan Garcia Portfolio? Actually before we move onto that, let’s
double-click the Submit button, let’s make it take up the full width. That looks better. And we’ll hit Escape, and for this portfolio
footer, let’s resize. It doesn’t look too good as things get narrow,
so let’s go in here and let’s take this collection list, which is also a grid, and
let’s remove three of the columns. It just automatically creates rows, one row
each for each of these. And that looks, each of these. And as we test responsiveness and fluidity,
now it responds just fine. Another thing about the container, thirty
pixels, it looks pretty good, but as this gets narrow that's a lot of space. Notice how this little menu bar icon is also
moving. So let’s change each of those. From the container, let’s decrease this
padding. Let’s do maybe ten pixels, that looks okay. So as we resize, that looks good. Maybe the spacing in between each of these
looks good at thirty. We could go in and go to our collection item
and change that from thirty to maybe ten as well. That looks good. And let's see what's going on with the button
up on the top, the menu button. As this gets narrow, the logo is pushing that
menu button to the right. So we could do a few things. The easiest might be to take Megan Garcia
Portfolio, setting a different width on mobile portrait here. Let’s do one hundred fifty pixels, little
bit smaller, and we can select our brand and add a little more space. Let’s do eighteen on the top and bottom. Maybe nineteen on the top and bottom, that
looks pretty good. And if we drag and resize now, let’s hit
Escape to go out of that symbol, even on the narrowest device, everything works okay. Now, here’s one of our favorite parts. If we go into preview mode, regardless of
what breakpoint we’re in, we can click and drag, to reflow through all of the breakpoints. Notice how we’re in desktop, now we’re
in tablet, mobile landscape, mobile portrait: it goes through all of them to test responsiveness
and fluidity of all our elements. Fully responsive design on all of these. Now what if we want to create a larger breakpoint? Well we can do that too. Let’s go out of preview mode, let’s go
up here, and we can add larger breakpoints. Twelve eighty, fourteen forty, or nineteen
twenty, let’s add nineteen twenty for much larger displays. Now, something interesting just happened. We’re on a Pro Display XDR, but the window
size is roughly nineteen twenty by nine sixty. It’s at 2X, it’s at retina when we’re
capturing this so we can capture in 4K, but notice how we are looking at a width of nineteen
twenty. Then we have this other number right here,
this seventy-six point seven percent. Webflow has scaled all the elements on the
page, so we can simulate what it will look like on a larger breakpoint. In fact, if we grab the edge right here, we
can click and drag even more to see what it looks like on a larger screen. Maybe three thousand pixels wide. Let’s decrease that. We can go all the way back down to show nineteen
twenty pixels in a canvas this size, on our browser, even if we’re on a smaller display,
it’s had to scale down the elements. And that’s okay. It looks good. We could maybe increase the container width
to, let’s say, sixteen hundred pixels, just widen that out. That looks pretty good. Maybe we want a larger heading on our larger
display. Let’s switch it to maybe fifty-six, and
let’s increase that height. Let’s use unitless, one point two, we’ll
use a little hyphen here, Enter. One point one might be better. And, let’s get rid of that maximum width,
let’s make that a lot wider. So we’re going to increase that to seven
eighty. That looks good. Selected projects, maybe our H2s can get bigger. Again, let’s do one point one hyphen, and
then let’s increase that. That looks a lot better. Maybe with our paragraph selected some more
space at the bottom, we can change these things a little bit later. Let’s do thirty. That looks pretty good for now. But, that's our larger breakpoint. Again, we can go to preview mode and we can
see all of this in action. Let's grab the edge, we can click and drag
and we can see what it looks like on 1920, desktop, tablet, and mobile devices... Now, we always want to switch back to our
base breakpoint. We want to do all of our basic designing,
all of our standard designing in the base breakpoint. And then when we’re testing responsiveness
and fluidity and we're building different designs, as we’re adjusting our designs
for each breakpoint, then we can switch over to tablet, mobile landscape, we can go back
up to our nineteen twenty. We always want to go back to our base breakpoint
when we add new elements and style. That’s our starting point. But, with that we’ve completed our first
pass on the homepage. Is it one hundred percent? It’s pretty close. We’re definitely going to revisit it. But there are two other pages we want to build
out. We’ll build out a project details page,
details about each project in Megan’s portfolio, and we’ll add a separate contact page we
can link to throughout the project. [Sara] You know what I’m thinking? [McGuire] Yes. [Sara] No you don’t. [McGuire stares]
[Sara] Okay, what am I thinking about? [McGuire] On three. [Sara] Okay. One, two, three-
[McGuire in unison with Sara] Food. [Sara in unison with McGuire] Lunch. [Sara] Did I have the food face? [McGuire] What is food face? [Sara] How did you know I was hungry? [McGuire] Because. But seriously, lunch. [McGuire] After lunch, the project details
page. [Grimur] But first, share your finished homepage
(or maybe your draft) using #21DayPortfolio. Twister, Stengram...Sussifrost. Why? Well, I want to see them. But we also want to SHARE your work. Because we’re PROUD of you. And I really mean that. We’re humbled, and honored — hey, wait
for me.
