On this lesson, you will be taught:
1. Styling your web site throughout completely different breakpoints
2. Add bigger breakpoints
3. Scale the canvas
4. Override types throughout completely different breakpoints
5. Clear overriding types
6. Check responsiveness and fluidity
Learn on the weblog: https://webflow.com/weblog/3-new-larger-breakpoints-in-webflow
Steps within the video:
00:00 – Introduction
00:43 – Fashion throughout breakpoints
05:38 – Add breakpoints
08:04 – Scale the canvas
11:39 – Override types
12:44 – Clear types
14:33 – Check responsiveness and fluidity
———-
Get began with Webflow: https://wfl.io/2r7cVUW
https://webflow.com
Tweets by webflow
https://fb.com/webflow
source
This is incredible. I love your style of explaining things.
Fluidity – Click & Drag to change between breakpoints is the best.
In min 0:43 you talk about sizing and spacing and that fixing something on smaller views, will automatically generate a class. I don't see that class when fixing something on a smaller view. Base breakpoint already passed down a class and a combo class. Issue: my typo on base breakpoint looks fine, but it needs to be adjusted on smaller views. Do I need to create another class on smaller breakpoint, or is styling typography on smaller breakpoint enough?
Hello webflow,
Everytime i tried to preview on larger screen the whole page blurs
When i go to back designing mode it becomes clear again
whenever I change the smaller screen it changes the larger ones too, help!
Your educational content is as close to perfect as it gets.
How to add a smaller breakpoint for older mobiles?
why is preview size is not the same when you publish it?
I have experienced a common type of situation in which I have two columns, text on the left side and an image on the right side. Switching to the mobile breakpoint it drops the right column down. But I really would like to have the image on top. So I duplicate that column and disable it on desktop and only enable it on mobile. I change the order of the columns and then my image appears on top. My question: Is there a more efficient way to create a responsive column that drops the column you want to drop?
On the column settings you can easily change it from multiple columns to one column on smaller displays, but not the order of the columns. I think it would be a nice feature to have it there.
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…
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
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?