On this Webflow lesson we take a look at the mobile version of the features section. How to make your slider responsive using Webflow and how to make the grid layout responsive in Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS