The Responsive Styles feature is accessed by clicking on the Mobile icon in the top menu bar within the Designer.
This feature allows you to apply a different style to any piece of content just for mobile devices. For a simple example, you could centre-align a text box on mobile devices, because it reads better on a smaller screen when the user will have to scroll. But on any desktop computers/laptops, the text box would remain left-aligned, which may read better with more screen space.
If a blue dot appears over the Mobile icon in the top menu, that indicates there has been changes made in the Mobile View. If there is no dot on the Mobile icon, then there will be no style differences on your Landing Page or Email across devices.
Please note, our Responsive Layouts will still be in effect, so even if no Responsive Style changes are made between the Desktop and Mobile views, your content will still be displayed optimally for the screen size it's viewed on. An example of this can be seen in our Designer help article here.
If you are familiar with making style changes to any item in your design, these Responsive Styles will be nothing new. The screenshot below shows the 'Style' section of the Properties Panel, where you can change background colours, fonts & font sizes, dimensions and alignment. To make use of Responsive Styles, simply click the Mobile icon from the top menu mentioned previously, select the component you wish to edit (rows, columns, text boxes, buttons, images), and make some style changes to it.
When you make some style changes in the Mobile View, you will see the option to "Reset Mobile Overrides" at the top of the Style section (shown below). This is a quick and easy way to revert all changes you've made, otherwise you can use the "Reset" option above each style as normal.
These Responsive Style options can be a great way to ensure everyone viewing your content sees the best version possible. For example, font sizes could be increased on Mobile screens for better legibility.
Hide on Desktop/Mobile
Another Responsive Style feature you'll see at the top of the Style section of the Properties Panel is the ability to 'Hide on Desktop' or 'Hide on Mobile' (depending on which view you are editing in).
This toggle can be used whenever any component is selected, and will allow you to hide that particular item. Please note that it's not possible to hide Columns, or entire Views (when using Multi-views).
Simply toggle this feature on when you have a component selected, and it will become semi-transparent in the Designer to indicate that it will be hidden. Then to see the feature fully in action, view or Proof your Landing Page and you will notice that particular content missing.
Comments