Responsive Website in Webflow Part 4

on our design we created this stack so

it's uh the carts are just going to

stack one

above the other and we probably want to

move these arrows

up to the top when we get to the mobile

so let's jump in

alright so the first thing is we go into

our tablet mode

and right away we can access our grid

features grid that we

created and we don't really need to do

much here because this still looks

pretty

pretty good so what i want to do is

let's toggle these arrows on by default

so let's toggle this back on so we can

access both the left arrow and the right

arrow

and we're going to create a class a

utility class called arrow

so that both of them share because they

both have some

similarities as far as the size and etc

so what i want to do is first let's make

the size

a little bit smaller on these arrows so

if we put

0.8 it goes back to the default size

based on our 16 pixels but if we go back

to one rem

then it scales a little bit better let's

make this about 1.5

just like that and let's position them

over both to the top so right now

they're aligned to the top

but there isn't a width and a height

specified so let's make that a fix

50 pixels by 50 pixels both arrows are

on top of each other right now

and all we have to do is start aligning

them to the center

and then doing the margin offset we can

align them directly next to these little

pagination items all right so let's have

this one so let's have this one go

down about 50 pixels right there i think

55

is good and then we're going to add a

combo class here for right

and that's going to take us to the right

side

so we're gonna have here zero

this one is actually not the right this

one is the left

so we're gonna choose this one which is

the right

and notice what's happening i've added

zero to try to align it to the

right side but it's not doing that it's

putting it in the middle the reason why

is because we have a zero percentage

that's inherited by the arrow class

so we're gonna reset this and put this

at auto

and because it's an auto now it's gonna

respect the right side of the position

absolute

so have the right side arrow on the

right and then the left on the left

that looks good we don't need to do much

here with the grid

but let's check out what it looks like

when we slide over

when we go over to our second slide

using our breadcrumbs

click the next arrow and we can start

seeing this

looking good there still has no not a

lot we have to work on here

this class i'm going to set it at 100

but actually the max width is going to

be about 250 pixels

so we can go from there to 200 pixels

that looks a little bit better

the scale is a little bit nicer based

out of these

are smaller this should be also scaling

with it so 180 pixels looks better

okay so on the landscape view the

features grid will need to stack one on

top of the other

in order to do that we select the edit

grid and we're going to remove the

column

the second column and just by removing

that column

automatically all these elements start

to stack down

each other but the section has still

that 100 vh

so what we want to do is make sure that

all sections on this particular

landscape

avoid using the 100 vh unless we need it

so let's turn that into an auto

and immediately all the auto all the

sections that

previously had a

a 100 bh is gonna now be auto and you're

gonna see

some of that breaking on the parallax

section we're gonna go and fix that

later

but for now let's just focus on making

sure that

the section here with all the content is

nicely stacked on top of each other

this looks pretty big to me so maybe the

features section needs to have a max

width so that it starts to scale down

things a little bit

let's put this at 400 pixels and

immediately we can see that being

rescaled nicely also another cool thing

about the grid is that if you select any

element inside the grid you can order

them

either by first or last and

exactly what we want is doing that

let's update the row so that it's at

zero

but notice how this two have uh some

spacing between each other let's just

make that a 10 so that we have some

space in between the third row

okay let's take a look at the

next slide

so let's move that up about

just about there so 35 and also with the

arrows

make sure that the arrows have that same

height notice that arrow

over here i'm selecting arrow global

class so it's going to affect

both of them okay that looks a little

bit better

and then on the features of course we

can push this downwards so that we have

more

more room between the navigation

there we go all right let's take a look

at the second one on this

what we want to do is select the grid

that we have the flex

and because flex is a global class we

don't want to affect

a lot of what we're doing here we want

to wrap things out and

start aligning these elements vertically

so in order for us to do that

we can simply change we can add a combo

class

so this could be landscape wrap

and just like that we have created the

landscape wrap with a vertical direction

and what we will need is to add some

spacing between

each of these elements if i had made

this into a grid i would have had that

space between

and it would have been a lot easier for

me but because it's not i'm gonna have

to add

a specific class for the spacing

so let's say this one is m16

and this one is going to be

16 as well but because these are global

classes it's also going to affect

the desktop so right right away i can

see that there's some spacing happening

now between

the original design because i added that

m16

so now this sm stands for small

and it's going to affect only the

landscape and down

any other places it's not going to have

that margin

okay so that adds a little bit of extra

effort

and so that's why it's always good to

remember that grit is awesome

it gives us that exact same idea of auto

layout in figma

so let's select the section on the slide

on the second slide and on the combo

class

let's call this features

and features it's just going to have

some some padding

both on the top and the bottom

and that looks good let's check out the

section here

we here we added the actual spacing to

the features

box but we could also do a section here

called the features

intro and then add the padding

vertically there's a lot of padding

happening here

so what i'm going to do is just start

removing some of this batting

like that we know the max width is

always going to be

400

so let's create a vh so 1 vh

is going to be 100 vh over here it's

going to force back the 100 vh

and we're going to apply it to wherever

we think it needs that

100 vh this one looks good

so i think it's mostly over here in the

section of the story

yeah so it looks like it's d section so

100 vh

we're gonna use this com utility class

we're going to add it in here as well

there we go

we can toggle the features great we

removed the padding

but we want to bring that back so let's

toggle on

our grid and make sure that we have that

spacing nicely to the grid so i think

that's about 20 pixels yep

that's right so that looks good let's

toggle on

this uh first slide so we have the

second slide

this one's gonna need some padding as

well

all right so this looks good now that we

have these all nicely aligned to each

other and they have a nice

margin let's go ahead and fix

sizes on this title this title

right now is using the h1 but if we turn

this in h2 which

it's a good common practice because

remember

there should only exist an h1 on an

html document so we've already used once

here

and over here we are going to swap these

into h2s

but guess what we want to take that same

style

that we have from the h1s so let's call

this class

hero titles this hero title is going to

try to match the sizing

on desktop only to fit the

4.5 i believe is

uh used for the h1 so it almost looks

like an h1

but it's actually a trick we're using a

class and the element itself is an h2

all right and let's go ahead and stylize

that h2

so that make sure it fits along and

plays nice in different

break points this hero title we want

this to be

a four on landscape and then we want

this to be

super small on mobile so around 2.5 is

good

there we go so now that we have that

hero title established we can use that

when we start finding more h1s along the

way

‍