Breakpoint basics and responsive design in Webflow — web design tutorial



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:

34 comments

  1. 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.

  2. I wish there were a video that discusses responsive design vis-a-vis images. My images always become distorted at smaller breakpoints.

  3. 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?

  4. 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?

  5. Do you think he just happens to read books that are only white and grey in colour? Because that's what it seems like

  6. 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?

  7. 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.

  8. 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

  9. 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.

  10. I am loving the tutorials! Love the learning process, the Narrator has made the learning curve As smooth as possible

Leave a comment

Your email address will not be published. Required fields are marked *