Summary: This guide shows you how to easily configure any block in Sites to display only on mobile devices by accessing the block's settings and toggling off visibility for desktop and tablet views, allowing you to create customized, mobile-optimized content.
Before You Begin
- You must have the necessary permissions to access and modify Sites.
- To create a mobile-only block, you must turn off visibility for desktop and tablet.
- Tithely Tip: To optimize a block background image for mobile, make the graphic 760px wide x 680px high, and set the height to 50.
Step-by-Step Instructions
1. Navigate to the block you'd like to set up for mobile, or create a new block.
2. Click Edit Block.
3. Select Settings.
4. Select the mobile device icon in the Display Block On section, ensuring it is green.
5. Turn off the block for desktop and tablet by clicking on their icons until they are greyed out.
6. Adjust your content to your liking for mobile devices.
7. Minimize your browser window or use your mobile device to view what your site looks like in mobile view. [You will still be able to see the block as an admin, but it will appear dark grey on your site when logged in.]
Troubleshooting & FAQs
- Why is the block dark grey when I'm logged in? The dark grey appearance indicates that the block's visibility is set to "off" for the device you are currently viewing it on (e.g., desktop/tablet), but it remains visible to you as an admin for editing purposes.
- How can I test the mobile view without a phone? Minimize your browser window on your desktop to force the site into its tablet/mobile responsive view.
- I want the block to show on desktop and mobile, but not tablet: In the Display Block On section, ensure the desktop and mobile icons are green and the tablet icon is greyed out.