The Mobile Signup
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Responsive Website in Webflow Part 7

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.

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.


It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

📥 Download Template

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


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


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


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


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

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor

Neftali is an award-winning creative director with over 15 years of UX/UI design experience, a passionate no-code advocate and instructor @ Awwwards Academy!


Everything you need. 🥳 Forever Free.