Breakpointless

Most Webflow Layouts Are Broken

• When a user doubles their preferred font size, no text should overflow.

• Because Webflow breakpoints are set with PX, the layout doesn't wrap when a user increases their preferred font size and text overflows.

Benefits of Building Without Breakpoints

• Improves accessibility by allowing layouts to wrap when users increase their font size

• Creates less code than manually defining styles on each breakpoint

• Allows for faster development since styles are automatically responsive

• Makes future design changes easier, since updates only have to be made in one place

Techniques For Breakpointless Builds

Apply no styles to the tablet, mobile landscape, or mobile portrait breakpoints. Do this instead.

1. Enable wrapping for any horizontal flexboxes

• This lets the browser decide when the layout should wrap.

• If new links are added later, if the user translates the site into a longer language, or if the user increases their preferred font size, the layout will still wrap before we run out of space.

2. Use autofit and autofill grids

• Automatically responsive: The number of columns adjusts based on the available space and the minimum column size we define.

• If the content or font sizes change later, we can update our minimum column size from one place instead of needing to update each breakpoint manually.

3. Use flex basis (example)

Step 1: Enable wrapping on a flex parent

Step 2: Apply grow 1, shrink 1, and a width to the first child

Element will remain 6rem wide until the layout wraps. Once the layout wraps, element will become full width.

Step 3: Apply grow 500, shrink 1, and a width to the second child

Second child will fill all remaining space. Layout will wrap before second child gets smaller than 13rem.

4. Use accessible fluid typography

• Breakpoint font sizes overflow when users double their font size because the changes designed for smaller screens aren’t triggered.

• Fluid sizes create a smoother zoom experience, adapt better across screen sizes, and are easier to maintain within a type scale.

5. Avoid all px units

• PX scales with browser zoom but not with user font size, similar to VW which ignores both.

• Using PX for borders, radius, and shadows makes them feel smaller and off-scale when users increase their font size.

• PX padding can overflow when inside a REM-based container.

6. Use container queries when needed

• Give the container or any parent a custom property of container-type: inline-size;

• Add custom css to affect the container’s children when the container is larger or smaller than a set size.

Using GSAP With Container Queries

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/flowtricks/[email protected]/match-container.js"></script>
<script>
document.querySelectorAll(".hero_section").forEach(function (section) {
  const heading = section.querySelector(".hero_heading");
  heading.observeContainer("(width < 40em)", (match) => {
    if (match) {
      gsap.to(heading, { color: "red" });
    } else {
      gsap.to(heading, { color: "green" });
    }
  });
});
</script>