Hi all! I developed my page first in 1440 breakpoint because the content required that (it’s an admin page with many columns). I’ll be exporting the code for my client’s programmer to implement on their admin page. So now all I need is for the same exact design to show up on the rest of the smaller breakpoints — I don’t even need it to be responsive, just needs to inherit the same look. Sideways scrolling is perfectly fine. (Please don’t say I have to go through style-by-style on the desktop breakpoint!)
What’s the best way to accomplish this so that the CSS from the 1440 breakpoint is the only style that’s used across all breakpoints?
Styles cascade both ways from the base breakpoint, so unfortunately you would need to make all of your style changes there for it to show on both larger (and smaller) sizes.
It can be a bit confusing if your coming from traditional web development as normal cascading styles typically either go from big to small or small to big (depending on whether your using min or max-width media queries) while Webflow uses a combination of the two. Essentially you should only make changes to any of the non-base breakpoints when you want something to change on that breakpoint size—your base breakpoint would have worked at 1140 whether or not you actually chose to “create” that breakpoint size in the Designer.
I’m not sure exactly how many styles you’ve overridden on the larger size, however any changes show up in blue (with amber colors indicating inherited styles) so at the very least you have a record of what needs to be changed on the base breakpoint to get things looking the same.
Right, so now that I’ve basically designed everything in the 1440 breakpoint, how would I edit the exported CSS style sheet to only see that breakpoint as the main style? (I don’t need the rest of the breakpoints to be responsive at all.)
Ah, got it! I just went through the CSS stylesheet and deleted all the media queries and left the CSS for the 1440 breakpoint. It works exactly as I wanted it to! Whew.
