Debugging Webflow

Common Layout Problems

No items found.
Overview
Debugging Layout & Responsiveness Issues
Common Layout Problems
21:51
300
Using Readonly Link for Advanced Debugging
2:45
301
Debugging Forms
Forms Submission Problems
400
Debugging Domain Names & DNS
Www.www Problems
500
Debugging Webpages
Debugging Script Problems
800
Debugging Mobile Devices
801
No items found.

Clean Layout Strategy

  • Generally, avoid applying flex / grid directly to the body element. It would rarely solve a useful purpose, and will complicate debugging of your layout in the child elements.
  • Generally, avoid complex layered arrangements of grids & flex elements. It will probably work, but it will be very difficult for you to navigate your own design.

Localizing Layout Issues

Use the blue outline in the designer to identify which elements are wider than the current breakpoint. When you see the blue outline going outside of your canvas, you know something is "breaking" that elements layout. If the element's outline fits correctly on the canvas, you know that it, and its children, are not the problem.  

Common Problems

Watch out for padding and margins on elements. At narrower breakpoints, these may not fit, and they will push out the entire grid.

Making Grids Responsive

To support narrower breakpoints, reduce the number of columns in your grid ( with Row layout setting ) to change the flow to a narrower design as you reduce breakpoints. In general, sticking to auto-layout whenever possible will make this even easier.

At points where you reduce the number of columns, watch out for immediate child items which have a colspan that exceed it, e.g. a 1 column grid, but a child grid item that specifies a colspan of 2. That will break your layout.

Strategies

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.