Issues using grid in bigger breakpoints

Design help General
1

Hey,

My layout uses a 12-column grid in all screen sizes, but the position of the blocks changes according to the breakpoints. I’m working with 2 extra breakpoints: 1280 and up and 1920 and up.

  • On the 1280 and up breakpoint, I have a div that starts in column 3 and ends in column 10.
  • On the 1920 and up breakpoint, I have a div that starts in column 4 and ends in column 9.

It works fine on designer view on webflow, but after publishing it it breaks, and the media query for
1280 and up overrides the 1920 and up only when defining the grid areas.

image
image1920×1054 78.7 KB

Looking into the .css file the styles for 1280 and up is written below the1920 and up. Just by adding this in the reversed order makes it work, so it seems a bug to me.

image
image1212×1674 381 KB

I’m not sure how to handle it. Any suggestions? Thanks! :slight_smile:

Here is my site Read-Only: Webflow - Design's Awesome Site

2

Not sure I fully understand your specific instance but generally Webflow styles cascade up and down, inheriting from the base breakpoint which is the laptop icon with the star.