Why your Webflow mobile styles refuse to apply

When a style you set at a Webflow tablet or mobile breakpoint never shows up, the usual cause is an inline style on the element, written by an interaction, an embed or a script. An inline style outranks every class and every media query, so your breakpoint rule is applied and simply loses.

The short answer

Webflow breakpoints become media queries, and media queries only decide which class rules apply. A style attribute on the element itself sits above all of that. If an interaction left style="opacity:0" or a transform on the element, or a script wrote a width into it, your mobile setting is in the stylesheet, correct, and losing.

The fix is to stop the inline style from carrying anything you want to change per breakpoint: move the value into a class with a breakpoint override, or change what the interaction or script touches. Adding !important in a stylesheet also wins, and we explain below why it is the wrong fix.

Why inline styles beat Webflow breakpoints

Every setting in the Style panel becomes a class rule, and every breakpoint wraps a set of those rules in a media query. Inside the stylesheet, specificity and order decide the winner. The style attribute is outside that contest: it beats any class selector and any media query. Only a declaration marked !important in a stylesheet beats it. Inline styles reach a Webflow element from several places:

• Webflow Interactions. Initial states and animated values are written as inline styles on the element, such as style="opacity:0; transform:…".
• Third-party scripts and embeds. Sliders, popups and layout libraries often set sizes and positions inline.
• Custom attributes. A style attribute added in the element’s Custom attributes is an inline style like any other.

On our own site, the About page had a layout written with inline grid columns. At a 320px wide screen it kept two 128px columns, because the inline style beat the mobile media query. Nothing errored and the code looked right; the rule just lost. Moving the columns into the stylesheet fixed it. Separately, inline transforms on three components survived our reduced-motion rule for the same reason, a story we tell in the note on reduced motion in Webflow.

How to find the inline style

In the Webflow Designer

1. Select the element at the breakpoint where the style fails and confirm the value is set on the class the element actually carries, at that breakpoint.
2. Open the Interactions panel and check whether any interaction targets this element, especially one with an initial state or a scroll or page load trigger.
3. Open Element settings and look under Custom attributes for a style attribute.
4. Check Embed elements and the page’s custom code for scripts that select this element’s class.

The 30 second check in DevTools

1. Open the published page, open DevTools and turn on the device toolbar (Ctrl Shift M, or Cmd Shift M on a Mac in Chrome). Set the width to your breakpoint.
2. Right-click the element and choose Inspect. In the Styles pane, the first block is element.style. If it lists the property you set, that is the winner, and your breakpoint rule is further down, struck through.
3. Switch to Computed, find the property and expand it. It names the rule that supplies the value.
4. To list every element on the page that carries an inline style, paste this into the Console:

document.querySelectorAll('[style]').forEach((el) => {
  console.log(el, el.getAttribute('style'));
});

Run it once on load and once after scrolling. Interactions write and rewrite the attribute as they run, so an element can be clean on load and carry a transform after its trigger fires.

The fix: move the value into a class

Layout values belong on classes

Grid columns, widths, display, flex direction: anything that should change per breakpoint belongs on a class. Remove the inline value, set it on the class at the base breakpoint, then override it at tablet or mobile in the Style panel. What Webflow writes is the equivalent of this:

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { /* example width */
  .split {
    grid-template-columns: 1fr;
  }
}

That is the whole fix we made on our About page: the columns left the element, and the mobile rule applied the moment it was no longer outranked.

Interactions: animate one element, lay out another

If an interaction sets opacity and transform on an element, do not also try to control those properties on it per breakpoint; they lose wherever the interaction has written a value. Wrap the element, animate the wrapper, and style the inner element with classes. Each property then has one owner.

Scripts and embeds: configure, then wrap

Most libraries write inline sizes because their settings tell them to, so check the options for a responsive setting first. If there is none, put the widget in a wrapper and control the wrapper with classes.

Other reasons a mobile style does not apply

A combo class outranks the base class

A combo class is a chained selector, and two classes outrank one. If the element carries a combo class that sets the same property at desktop, that value can still win at mobile over a breakpoint value you set on the base class alone. Set the mobile value on the combo class.

The value was set at the wrong breakpoint

Styles flow down from the base breakpoint to smaller ones. A change made while viewing mobile portrait does not reach mobile landscape, and a change made on desktop reaches everything below it unless a smaller breakpoint overrides it.

Custom code with a stronger selector

A rule in Site settings or Page settings custom code that uses an ID or more classes outranks the single class the Style panel writes. Search custom code for the class name before assuming the Designer is wrong.

How to keep breakpoints working

• Inline styles carry motion and state, classes carry layout. Keep the two on separate elements when both are needed.
• Check every new interaction at every breakpoint, after its trigger has fired, not only on load.
• Run the [style] snippet before handoff and account for every element it lists.

Breakpoints that hold up under interactions and embeds are part of what we build in Webflow design and development. If yours still refuses to apply after these checks, send us the page and we will take a look.