Streaming live at 10am (PST)

Styles/Positioning Cascading Up - Mobile to Desktop and also vice versa

Hi there, the positioning of elements in desktop cascade down as they’re meant to - when I alter them on mobile they cascade back up to desktop changing the layout. Is there a fix for this? Thanks.

Welcome to the community @BrandonMancini!

Can you please include a read-only link for us to check out? Without seeing the specific example it’s hard to determine if this is a bug or how you can go about fixing the issue.

Hey, here is the read only ink -

https://preview.webflow.com/preview/yesalandingpage?utm_medium=preview_link&utm_source=dashboard&utm_content=yesalandingpage&preview=5273fdd23166defbfc63dbf2dca964ff&mode=preview

I made the changes on mobile to show how it affects desktop. If I make changes on desktop it’ll alter devices below it in the hierarchy, how it’s meant to. If I change it on mobile it affects every other device also which isn’t suppose to happen to my knowledge. Any help is greatly appreciated.

What changes are you noticing cascading upwards?

I tried to adjust some properties on mobile and none of them were affecting mobile landscape or higher breakpoints, but it’s possible that it’s limited to certain style changes.

Thanks for getting back to me so quick:

I’ve attached some pictures to give you a visual.

On desktop it is meant to be:

FormSection

FormDivRight
FormDvLeft

Placed side-by-side. On mobile they are meant to be underneath each other:

FormSection

FormDivRight

FormDvLeft

Except when I take FormDvLeft out of the section on mobile it affects the desktop version also.

Ah I see, you’ll need to keep all changes within your styles panel—moving elements around in the navigator on any breakpoint will affect all breakpoints. In this case, I’d recommend just using flex-direction to change the side-by-side layout (horizontal) to a stacked layout on mobile (vertical).

On desktop and tablet, your FormSection should look like the following:

image

On both mobile landscape, change the direction to Vertical:

image

Before you can do any of that, make sure you’re two columns are nested within that FormSection:

image

It’s also worth noting that you’ll probably want to adjust your grid layout within the FormDvLeft element on tablet to a single column layout like you have on mobile portrait.

Hopefully that helps, let me know if you run into any issues :v:

Switching the flex box worked, still having troubles with the desktop being affected by the positioning. Changed up the layout to make it work though, thanks for all the help.