How to adjust the mobile design

Designs built in Modern Editor will naturally transform to one-column on mobile devices. There’s not much more you need to do to make your design look great for mobile. But, there might be some parts of the design you ned to fine-tune for mobile.


Use the Global | Mobile toggle in any Styles section to refine mobile styles. When mobile is toggled you’ll see a phone icon in the Styles and the preview panel (right side) will slide over to the mobile view.

 

 

Tip: It's easiest to first go through and set up all your styles with GLOBAL selected. You'll know it's selected when you see the globe icon next to your styles.

 

 

Once everything is all set up and looking great for Global styles, you can make small design changes for the Mobile version.

 

This is a great option if you have images and text areas that may not align well from desktop to stacked one-column on mobile. Use the mobile toggle to adjust how the images and text display/align on mobile.

 

 

Example, changing the background for mobile only

Let's say you want to change the background from your global white to light grey on mobile.

 

1. Open your design in Modern Editor.

2. Go to the STYLESHEET tab on the edit content panel (left side).

 

3. Select Background.


 

4. Click the Mobile toggle.

The preview panel will scale down to mobile size and you'll see the globe icons change to phones.

 

5. Open the Container.

 

6. Update the background to a light grey.

The mobile background color will change to grey. Use the preview panel slider to watch the color switch to white once the preview is larger than 480px.

 

***Not seeing this option? Update your Modern Editor code..

 

 

 

Have more questions? Submit a request
Powered by Zendesk