The content you are trying to access is only available to enrolled students of the KreativePro™ Masterclass
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCESSResponsive 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!
Webflow Project Files
All our project files for you to practice and play with along with some bonus materials.
Reviews
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 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
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS
