How to Customize Mobile View

Design for your audience

Here's a nifty time-saving feature. While building a template for desktop display, you can quickly create templates configured for mobile devices at the same time. With a few clicks, you can access and configure these settings:  

• format for mobile screens
• hide blocks
• change block alignment
• restrict responsive behavior at the block level

Preview as you create

Use the Preview tool to test and tweak mobile-only customizations. Click the Preview button at the top of the page and select Mobile.

Mobile formatting

Optimize content for the user's mobile screen by configuring text size and alignment. In one panel, you can customize settings for menu and footer items, button labels, headings, and body content. You can also enable full-width buttons.

Go to the side panel, click the Appearance menu tab, and then expand the Mobile Formatting panel. Scroll down the panel to access the controls. 

Here's a sample of what you can optimize for mobile display.

1. A dedicated tool to set the font size of menu items. 
2. Span H1s across the width of the screen by customizing font size. 
3. Ensure body content is readable.
4. Create easy-to-tap buttons with control over font size, full-width span, and top-bottom padding.
5. Create H2s that pop and encourage scrolling.

Hide blocks

Use the Hide feature to create desktop-only and mobile-only content. Click a block to make it the active layer, and then go to the side panel. 

Scroll down to the Hide element heading and click an icon. Hide the element on desktops, mobile, or none. 

Block alignment

Change block alignment to optimize content display on mobile devices. Click a block and then go to the side panel. 

Scroll down to the Mobile Alignment heading. Click on the mobile icon and then set the alignment. 

To adjust padding inside a block, scroll down to the Mobile Padding heading. Click the icon to enable mobile-only controls. Switch on the toggle to open granular control on four sides.  

Responsiveness

Occasionally, you might want to disable the responsive nature of a block to preserve a specific layout. 

Let's say, for instance, you have two columns of content. In a responsive environment, those columns might stack vertically on a mobile device, as shown in the screenshot below.

We might prefer to keep the two-column structure on mobile devices, so we disable the responsive feature.

Click the block, go to the side panel, and switch off the Responsive structure toggle. The result is below. The 2-column structure is preserved, but the content requires additional tweaks and formatting to present a clean layout.

Also, watch out for blocks with large images. If responsiveness is disabled, large images can create a horizontal scroll on mobile devices.

That's the summary. 

Enjoy crafting mobile-friendly templates!