When I adjust the styling of my page in mobile view, some of the styles work like I expect - only affecting mobile, but some of my changes like flipping columns and adjusting image size also affect desktop.
Which styles are able to be responsive and which don’t, and how can I make some things like reversing columns only affect certain device sizes?
So, the key thing here is that only style changes can be different per device when simply editing on different screen sizes. For example, if you have one font size in desktop view, you can change the font size in mobile view and it won’t affect the desktop font size.
Builder uses CSS media queries, so only CSS properties (styles, e.g. font size, color) can be applied differently from desktop to mobile. This applies to anything in the styles tab except for class names and custom element attributes (these are not style properties, despite being in the styles tab). Everything else in the styles tab, including custom CSS properties, can be set on a per-device level.
Reversing and rearranging columns is a layout change as opposed to a style change, so this is why it affects the page in desktop view also. To change the order of columns in mobile view, you can go to the options tab with columns selected and choose “show advanced”. There is a “Reverse columns when stacked” option that will reverse the columns when your page is in mobile view.
Another option is using the “hidden” option located in the Styles tab. This is a great option if you want significant differences a page per device (e.g. one piece, section, or the whole page).
You can make your desktop and mobile layouts totally different, and hide the mobile layout in desktop, and vice versa.
