In this lesson, you’ll learn:
1. Styling your site across different breakpoints
2. Add larger breakpoints
3. Scale the canvas
4. Override styles across different breakpoints
5. Clear overriding styles
6. Test responsiveness and fluidity
Read on the blog:
Steps in the video:
00:00 – Introduction
00:43 – Style across breakpoints
05:38 – Add breakpoints
08:04 – Scale the canvas
11:39 – Override styles
12:44 – Clear styles
14:33 – Test responsiveness and fluidity
———-
Get started with Webflow:
But how can I fixate the size of mobile version for instance on IPhone size view?
Great stuff! You guys are doing things right!! Lots of content surrounding the product is great!!
You come for the tool, stay for the teacher.
HOLY OKAY I'M USING THIS
Anyone find the NES Break Point Easter Egg LOL…
Man, I never watched tutorials as hilarious and informative as the ones from Webflow. Love the narrator. Love the scriptwriters. Love the editing. Good job for making such an effort to help users actually get better using your product.
His got something, don't know what… but i fell in love
I like the people behind these videos.. they are never boring…
Ya got me with NES 😂
I always find myself back in webflow haha
for overriding styles, can we make paragraphs be different on different break points
4:33 my current case
He is legend
I wish there were a video that discusses responsive design vis-a-vis images. My images always become distorted at smaller breakpoints.
This is such a joy to watch! And highly useful as well! Thanks man 😀
yes this works on texts. how about images?
Can anyone help
I used a long headline in the hero section like "Hi I'm Mayank". It looks fine in the laptop view but as I switched to tablet view it shows "Hi I'm" in one line and "Mayank" in the second line. Now If I put together "I'm Mayank" in the second line in tablet view, it is also changing in laptop view. What am I missing here?
When I remove a column for mobile view as shown at 4:36, it just auto generates a column anyway and it doesn't change what it looks like. This is only for one grid I have, for another it works perfectly. Any fix?
This was so helpful! I had it sort of backwards. Love this guy btw!
"Succulents, are they still cool?" I need to know….
Do you think he just happens to read books that are only white and grey in colour? Because that's what it seems like
please add NES breakpoint, thnx 👍🏽 also LET ME CHANGE THE BASE/ PRIMARY BREAKPOINT PLZ
Perfectly explained video as usual. I am really considering to start using Webflow. What I have noticed throughout all the videos on the channel is that there is none on search bar and how to, for example, filter things (e.g. movies) through the search bar. I would appreciate, and probably Webflow community, if you could do one in depth video on that?
So is it possible to change the actual layout of the page based on the different breakpoints,
because once you move something through the navigation it moves on all screen sizes.
For example if I wanted to have the side bar at the side but then want it at the top would I be able to do without CSS grid and and manually manipulate it for different breakpoints.
this guy is hilarious and these are the best web dev videos I've ever seen.
Hi , please what if we did a lot of changes on tablet and we want to apply them on a laptop ? how can we did this without remake all the changes one by one
I love this guy badly
Looking for a way to scale text dynamically (ems/rems?) with canvas resizing…
NES 🙂
I love these Tutorials! Very educational and hilarious at the same time! 😂👍
Do interactions cascade up and down as well as the rest??
Thanks a ton
Would be awesome if we could display different content for different sized devices rather than only be able to make changes to style and sizing.
I am loving the tutorials! Love the learning process, the Narrator has made the learning curve As smooth as possible
Best tutorials ever.