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: https://webflow.com/blog/3-new-larger-breakpoints-in-webflow
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: https://wfl.io/2r7cVUW
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow
source
This is quite possible the most annoying thing on whole Webflow. Why it won't just apply to all breakpoints itself? For my whole website I had to put things manually, cause nothing I tried worked to apply to all views at the same time…
Can all modes follow the same layout? I mean that they are responsive in the sense of stretching and contracting according to the values adjusted in the designer, but I want the Phone mode to be the only one, when the page is displayed on a pc or tablet only change the size, not the design, responsive only in size and distribution terms, thanks
Somehow, whenever I remove a grid column or row, they remains visible (greyed out when editing and visible when viewing the page), unlike in this vid where they immediately disappear. Anybody any thoughts on this?
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…
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
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