Styles are cascading up?

Hi, Im new to webflow and a bit confused about style cascading. I designed my site in desktop, then switched to tablet, and changed the text sizes etc.

Then when i looked at my desktop version, everything was changed there too! What am I missing here?

Thanks!

It is an issue I’ve come across as well a couple of times. Any ideas on this @cyberdave?

Hi @Stephanie, this sounds like a bug to me, but can’t tell without more info. Can you please update your post following these guidelines: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance!

Hey, I’m having the same issue as stephanie, where the styles are cascading upward.
I’ve tried this on multiple browsers and it’s still an issue.

Here is a quick example

Original desktop view:

If I switch the image to go before the text on a mobile view it will apply those changes to the desktop.

Thanks,

I think this is a small misunderstanding or expectation of what CSS styles have the capacity to do. I could also be seriously ignorant about how they work in the rest of the world, but I think this is how they work in Webflow from experimentation:

A media query / breakpoint only affects the style attributes of an element as they are solely driven by and alter the CSS. A media query cannot dictate element order or page flow as that is driven by the HTML.

The only real exception that I am aware of are manipulations using floats. Specifically, where an element with a float right will break the dictates of normal pageflow, allowing you to display it right to left on one media breakpoint and then cause those elements combined widths to exceed the parent container or page width causing them to stack at another breakpoint. In that case, when those elements stack, the natural html element order prevails and dictates page page flow rather than the float.

To accomplish what you are wanting otherwise you would probably have to duplicate one of the elements so it appears both before and after the alternating element and then toggle visibility at the device breakpoint through display hidden or using Webflows built in device visibility classes (which are amazingly convenient global super classes that can be appended discretely to any element regardless of its class name or structure).

Sorry if this sounds really cryptic or vague - that is why I am not allowed to write tutorials ;).

@cyberdave, @thewonglv - It would be super enlightening and helpful to have a clear example tutorial - a mini primer on media queries, inheritance and cascade and how it ultimately affects page flow. This was a hurdle for me personally early on and took a bit of time to sort. It wasn’t until I started deeply spelunking the code that I really began to realize how elegant and simple Webflow makes those tremendous things just work. If anything, understanding just make you appreciate how well thought out, powerful and accessible Webflow really is. Think about it, and if I can lend a hand in making something simple - deeply complicated and painful let me know - it is where I shine :wink:

Here are a couple of examples that show the float method to accomplish the alternating order - hope they help:

Continuing the discussion from How to make responsive alternating content layout stack on top of each other on mobile:

Continuing the discussion from How to make responsive alternating content layout stack on top of each other on mobile:

Hello @vlogic,

Thank you for this posting! I have one question, I copied the formatting of my test site exactly to your example (minus the text being centered in the left div) and my site is still not stacking like yours in the mobile views. Am I missing something? Here’s the link to the site:
https://preview.webflow.com/preview/responsive-test-test?preview=a3baebdb9fe057fe9509acc4daa9a97b

Thanks,
Dom

Hi @domo, sorry for the late reply. I made this one cloneable, thought it was already.

It is such a simple (and slightly mind bendy) slight of hand trick with floats that it is really super easy to miss.

I am swapping the content order of the elements on the second row - super important - (look at the Navigator)
With them swapped, desktop and tablet uses the float behavior, the right pane is first in the content order, but the float right overrides this natural order.

Then content order determines the sequence on mobile media queries once you make the divs 100% wide as the 100% width overrides the available span for the float behavior to exist.

The parts you are missing are:

  • the page order of the elements on row 2 (where this method is employed) they should be swapped of the natural sequence.
  • you need to set a the divs with the classes “left” and “right” to 100% width for the content order and natural flow to override the float for the phone media queries.

It is a very powerful little trick once you experience the pain of wrapping your head around how floats affect content flow. There are some great articles on the web, but for me, a little quick experimentation and observation in Webflow is hands down the best educational tool I know of. It has dramatically sped up the process for me allowing me to instantly discover how things work hands on.

Happy to help if you get stuck. Hopefully the clone will make everything clear. Look at it closely in the Navigator pane and I think it will all make sense.

-Rob

Thank you Rob! I got it to work.

-Dom

1 Like