Designs built in WordFly 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 need to fine-tune for better legibility on mobile devices.
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 right panel 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. Click the Stylesheet tab
2. Select Backgrounds
3. Click the Mobile toggle
The preview panel will scale down to mobile size and you'll see the globe icons change to phones.
4. Open the Email Container
5. 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 code.