On this Webflow lesson we take a look at mobile version of the sign up section. How to make your forms responsive in Webflow and how to align your background images in different breakpoints using 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!
all right our final section i want to
just check out how things look for our
sign up
so far we have our tablet mode
we no longer need these
border radius because we want to expand
everything we might want to hide these
brands as well
on specifically on tablet and below so
we could hide
tablet hide we don't need that one and
on these ones we also want to hide these
specifically on tablet so we can hide
them as well
there we go so it's just a little bit
cleaner so that when the user comes into
a laptop version here
we don't need to actually see the access
all right so
for this section we don't actually want
to have these
ex this spaces between we don't want to
have this to be 100 ph
so what we can do is we can remove
the vh on this particular section
again we can remove the uh we can add a
class
uh landscape auto height so we had a
landscape auto height but we
need to create one for tablet so tablet
auto height now that will
have auto and that will push
everything out so that the section is
going to be 100 percent of whatever the
container has this looks good right now
and then go into landscape the image
background
on that box might want to try to scale
it down right now it was a
cover i'm wondering what would happen if
we start changing that to
contain contain it's gonna it's gonna
grab that image and try to fit it within
so we don't want that one we want to use
continues in cover
but maybe we can change the position of
where those
patterns start we can play around with
the position of the cover image
and that looks pretty good to me again
we go down to mobile
and now this is where we start hitting
some some issues
the primary issue here is the input
field because the input field
has a fixed uh a minimum width that
we've established on
the desktop view so this input field
we're going to change that to zero
so that it matches the size of the
parent okay
but we actually want to expand this just
a little bit
that's a bit too much so baby 280
right about there is where we want to be
so 280 minimum pixels for those input
fields
and that's about it all right guys so
this is it for now
i just wanted to go over the little
break the different breakpoints and how
do we start thinking about
adjusting the layout so that it matches
and works well
all of this of course will will require
you to polish up some of the
some of the structure but my goal in
this particular
course the ability to create utility
classes along
in different breakpoints without having
to create so many names
and classes i'm super excited i hope you
guys are
too of building this streaming platform
website
let's jump into one of the most exciting
parts of this whole project
is animations and interactions so i'll
see you on the next module
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS