KreativePro Masterclass
Hello, {first_name}
4.6
The Mobile Products
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 5

On this Webflow lesson we take a look at mobile version of the product section. How to make your tab component responsive in 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

All right guys
Welcome back

Let's take a look at the products

So, on the products section I've
already gone ahead and kind of

made the adjustments to each of
these...

layouts in different breakpoints
and I just wanna highlight some of

the things that I made in order for
this to work out,

so I'm just gonna over a little bit
of what I've done

you'll see right away the VR tabs
that we have created when you start

scaling down into the mobile portrait
mode, if I select any of these

the only update that was made again
was just making sure that they fit

within the overlay grid, so I added
a max width of 100px so they are

contain within that space and because
the tab menu uses the display flex

it's gonna fit all of those thumbnails
within that space

ok if we head over to the second tab
what I've done is simply expand it

these VR cards that remember we saw
on our previous lesson

these were done in a flex, the children
were not wrapping around so I've

just made sure that this was toggled
on, so now this cards start stacking on

top of each other, and I've simply made
the width of these cards be 100%

without any max or minimum width
and just got rid of some of the margin

that they had, so overall you can see
this looks pretty good

with the same techniques that we
applied on our previous lesson

can be applied throughout the
entire project.

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
🚀