KreativePro Masterclass
Hello, {first_name}
4.2
The Mobile Hero
Learn to build websites without code in Webflow
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
56
lessons
7
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Responsive Website in Webflow Part 1

On this Webflow lesson make the hero section responsive on all media breakpoints. How to make your headings responsive in Webflow and how to add padding correctly in mobile breakpoints using Webflow.

It's your turn!

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

📥 Download Template

Webflow Project Files

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

Download
Download
Webflow Project Files

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
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.
Noel Hale
Founder of Slush Monkeys®
Mae
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!
Mae Green
Product Designer @ Dropbox

if we go into figma we have designed a

mobile version of what we

we want to work with we even created a

grid system that's just a two column

system

and over here we have hidden some of the

elements that we see on desktop because

those elements work based on your mouse

movement and because on mobile we don't

have a mouse

uh there's only touch points we don't

really need those hands anymore

and also it'll make our loading times a

lot faster because we don't have

extra images loading on the mobile phone

so what i want to do first off is go

ahead and create a utility class

in webflow that specifically targets

anything that's below

a tablet down to mobile it's just going

to disappear

that way i can utilize that same class

across multiple

instances of the design we can go down

to playground

right and in our playground i'm just

going to create a simple diff block

just so that we can add the class this

is gonna be called

tablet hide and what it's

it's gonna be it's gonna be called

tablet hide because i want anything

that's below

tablet to hide from the screen

and just like that right now if i click

on the layout

i want this to hide right now on

desktop base but on actual tablet base i

want it to show

so you see this is exactly what i mean

by using

uh the breakpoints we've created one

class that has a high display

a display hide on desktop

and then a show on tablet

if we go back to our home page that

utility class now can be applied to any

element

so for example this vr hand we can say

tablet

hide and boom right away

we can see that what it's doing

it's going to hide what it's doing it's

actually hiding on desktop

but i think what what i did was actually

do it backwards

what i need to do is actually show it on

the desktop

and hide it on top of it so let me do

that that's my bad

so let me go back to the playground and

over here i want to hide it

on tablet and then show it

on desktop so there we go so on desktop

it's going to show us a display block

and one thing to note though that if you

are using this on a specific element

that utilizes flex

this is not a good idea to apply this

tablet height because it's going to

break your layout

based on the display block that we're

setting all right

so let's go ahead and check this out on

the home page

so we can see now that class utility we

created tablet hide

is applied to these hands so when we go

to tablet mode

they are hidden and they won't appear

anywhere across

any other device cool

okay everything in here looks good it

still fits within

our scale of our tablet mode so we don't

need to worry about this

breakpoint for the home section we we

can adjust the gradient so

we just need to go into the gradient

here we can make this maybe

500 or 400 pixels that's too small

and we can just start playing around

this one has the 50 and 50 maybe we want

to have zero and zero

we could play around with these position

values so we can see

where we actually like our design so

just about there it's

actually that's pretty good the position

of that background is moving all the way

around this area making this design feel

a little bit closer to our desktop

all right and then we have now our

mobile

so on our mobile break point something's

happening

the actual title is way too big and it's

getting

cropped off we can go back to

and what i'd like to do is select

the all h1 headings but notice what's

happening is that all h1 headings always

going to take me back to the desktop

breakpoint

it does not allow me to change the old

h1 headings from a specific breakpoint

and especially if i have a class defined

so what one thing we can do is go back

to our playground so on the breakpoint

for mobile in playground

we can see right away the spacing is

extremely wide

extremely large try to match where that

20 pixel starts

that 20 pixels is where our grid starts

to limit us but the h1

is still too big for this particular

size of the breakpoint so we want to

make sure that we select all h1 headings

on the mobile without any classes

selected

and we want to make the size of that

topography

try to fit that scale so 4

is actually a good decent size we can

see here that that's expanding if the

letter if the word is actu it's longer

there's not much we can do but at least

we

we're trying to make it so that it

creates an a different break line

or a different line every time it

reaches that point

okay so that's what we're trying to do

if we go back

we make sure that everything looks good

here we can go back to

our home page and we can see now that

a little bit of that extra text is

starting to show up

we might need to have we might have to

create an additional background

so let's jump into our figma to create a

square background specifically

for this if we go into our figma in our

mobile i have already created a specific

background

pattern for this section of the video on

demand

so i'm going to export this out

i'm going to try to make it contain so

just by clicking cover it's going to

adapt itself to the size of this square

so this is looking good it works both

on this side like that

all right one thing i like i like doing

is making sure we have some padding

added on all of our containers

specifically on mobile

so that we don't have some of those

letters touching the edges

of the browser so like this could be

split into a nice edge so this is

looking good let's make this title

still feel it's too big so let's make

this a little bit smaller

the heading could be a 3.8 okay that

looks better

but what i'd like to do is add that

padding that we talked about for the

containers

so any container with this class

container will probably want to have

a padding on the sides for mobile

so we can call this we can add a class

here for container on mobile only

so let's change that to 20.

this logo we can make also a little bit

smaller on mobile

so let's click on the navigator this

logo can be smaller but the only the

problem with this is that

whatever size you set here on the image

itself

it's not going to be responsive like if

i change that size on that image

it's always going to be 200 on all

different formats

in order for you to fix that you need to

create a specific class

for this particular logo so that

maybe we call it hero logo that way we

have some additional settings on all

breakpoints

but for now this looks okay so what i'd

like to do is activate this

but we can actually fix that by

selecting the wrap

and now we can see those icons start

wrapping around

each other because we have created a

brand class

a logo class we can kind of set a size

and right away we can start modifying

some of the type the the sizing

in mobile

and we want to make this title a little

bit smaller

so let's jump back into our playground

and make sure that h

this heading we're going to remove this

heading that we created accidentally

and we change this to a 3.5

and then all h2 headings is going to be

2.5

and all h3 headings is going to be a 1.5

so this is looking a little bit better

if we go into our home

boom now we have this uh feel a little

bit more spaced out

if we spread this open this is more of a

regular size phone so this looks good

we can also push the brands now that

these brands are wrapped we can push the

absolute to

zero so that they are completely on the

bottom and we have the scroll icon freed

up

alright guys this is cool i want to show

you how we can start applying some of

the styles for the navigation

so let's jump into the next lesson

Coming Soon

The future of the web without code
56
lessons
7
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
NEXT COURSE IN
00
Days
00
hrs
00
mins
00
secs
🚀