Responsive Layout Techniques

I saw this post recently in the Webflow forums;

I am trying to create a different footer for different breakpoints but whatever changes I make to the tablet and lower breakpoints make changes to the desktop versions! ( I am trying to rearrange the div blocks in the footer section )

It's a great summary of a common misunderstanding that new Webflow users have about how responsive design works in Webflow.

The perception is that each breakpoint is its own thing, and that any design changes you make there should only affect that breakpoint.

That's not the case, and there's good reason for it.

How responsiveness works in Webflow

3 Rules of Responsiveness

• All of the elements you create and move in the designer exist at all breakpoints.
• Responsiveness comes into play within the style panel only.
• Responsive design styling works outward from the default ( aka. desktop ) breakpoint. Changes you make there affect every other breakpoint unless they're overridden at a specific breakpoint- at which point that new setting affects all of the breakpoints past it.

Understanding these rules will set the foundation for all of your work in Webflow. That third one is the one that trips up most new designers, so lets give some examples;

A style override at tablet is inherited by your mobile portrait and landscape breakpoints. A style override at your 1280px breakpoint is inherited by larger breakpoints like 1440px and 1920px.

How to Design Responsively

Start your styling as the default desktop breakpoint and then work downwards to smaller breakpoints and upwards to larger ones, if you have any.

If you want to have significantly different element arrangements at certain breakpoints, you really have three options;

1. Make two ( or more ) versions of that section, and use the display: none setting in style to control which appears at which breakpoints.
2. Learn the flex layout well, and structure / nest your section DIVs so that you change positions by reversing the order of elements in flex
3. Learn the grid layout well, ninja-level. All of your element positioning and sizing is controlled by CSS therefore it can be modified at every breakpoint through the style tab. **

** Grids are awesome, and powerful, however they’re a nightmare if you do them wrong. Layouts blow up, elements go off screen. Chaos. More than one client has brought me in originally just to fix grid issues. I’d practice hard in a separate project or a clone before you try doing this in your main project.

‍