Mobile Design

Overview

The Mobile design of your theme allows for some minor flexibility such as the resizing of text, resizing of images, adding/removing padding, and hiding unwanted blocks. There are also some restrictions such as re-organizing blocks into a different logical order (what we call the "stacking order") of your desktop design.

Switching to Mobile View

When designing a new theme you should always check your mobile view to ensure the design looks good for mobile devices. Switch to mobile view by clicking on the 'devices' icon and selecting "Mobile".

1280

Auto-Stacking

Auto-stacking is a toggle setting for the mobile view that allows you to automatically set your mobile design to the logical Stacking Order of your desktop design. The toggle lives in the 3-bar icon to the left of your mobile design:

1280

What Is "Stacking Order?"

Stacking order assigns a logical order of objects from the desktop design. When translated to mobile, the order, which on desktop may contain horizontal and vertical alignments, transforms to mostly vertical. See below:

1605

Blocks on mobile can be re-arranged as long as the Stacking Order is respected. Below you will see two examples where the above desktop design is arranged from 3 columns to 2 columns on mobile. In the first example, the stacking order is respected. In the second, the user is presented with the error:

❗️

Altering component order is not allowed in Tablet and Mobile mode.

This error appeared because block #2 is being dragged above block #1.

1795

That error will appear anytime you move objects out of order. If this is happening to you on mobile, simply toggle the Auto-Stack blocks for mobile setting until all blocks are properly stacked.

Removing Gaps

Sometimes logical spacing on Desktop does not translate well to mobile leaving large gaps between blocks, you can fix this by using the "push" icon on a block and sliding it up or down.

879

Hiding Blocks

Some blocks are too large, don't make sense on smaller screens or simply push the important content too far down the page on mobile. These blocks can be hidden on your Zoey mobile design.

Right-click or click the Gear icon and select "Hide".

640

Hidden blocks can be restored using the "Hidden Blocks" menu. Hover to have them appear where they used to show. Click to restore them to your design.

1280

Mobile-Only Blocks

Currently, Zoey does not have a feature to have Mobile-Only blocks.

Custom Mobile Header Blocks

In Mobile, your header will be hidden and in its place will be a Mobile Optimized Header. This means any custom blocks you added to your header will not appear on mobile.

Learn More About The Mobile Header