Check this guide on responsive content that works across all devices and screen sizes to see if you can create your content without a separate version. However, in some cases, you'll create content that’s just not going to work on mobile, e.g. a complex homepage or any intricate, inflexible design.
That’s when you can use our responsive controls to add a separate mobile version - you can use our viewports to create a different version specifically for mobile users, so it's less noisy and they still have an optimized experience!
Or you might decide to show a banner prompting users to access the content through a larger screen or hide it completely from mobile users, so it doesn’t appear at all!
We’ll cover how to use responsive controls in this article to
Create a separate mobile version
Create a banner prompting users to access it from a larger screen
Hide your content completely from mobile users.
Using Candu’s responsive controls to create a mobile-friendly version:
To demonstrate this, I'll use a banner as an example. To make a mobile-friendly version of the banner, you'll need to:
Create your banner leaving the sizing as unset or 100% width to be responsive between tablet and desktop (always avoid fixed px as when you reduce your screen size to tablet, the fixed pixels will prevent the content from adjusting down).
Select your banner and uncheck the mobile icon from Responsive > Display in the toolbox, so that it will only display on a tablet screen size or larger:
Make a copy of the banner and paste it into the same content doc. This time, uncheck the tablet and desktop icons from Responsive > Display, so it will only show on mobile!
Tweak your content to work with the space you have (e.g. setting the Card to Wrap mode) and switch between the Viewports to check how your content looks across all devices:
Voila, you have an optimized experience across mobile, tablet, and desktop! Now, go launch your content in the wild 🚀
ℹ️ Watch this 3-minute video guiding you through creating a separate mobile-friendly version of your content.
Using Candu’s responsive controls to create a banner prompting users to view it on a larger screen
Sometimes the best UX is viewing your content on a tablet, laptop, or desktop, so why not create a banner prompting users to access the page through a larger screen?
This one is super simple, all you'll need to do is:
Add a card to your content doc and customize the color, etc.
Hide the card from the tablet and desktop view, so it'll only display on mobile.
Drag on the Typography of your choice and customize the copy.
Publish it in your product ✨
✨ Here's a handy tip, if you want to view your content from a mobile viewpoint, you can head to...
Click View
Click Developer
Click Developer Tools
Click on the 'Toggle device toolbar' icon
Switch the Dimensions to Galaxy Fold:
ℹ️ Watch this 2-minute video guiding you through creating a banner to prompt users to view the content from a tablet, laptop, or desktop.
Using Candu’s responsive controls to hide completely from mobile view:
If you don’t have mobile users, then you can either leave your content up or hide it completely from mobile users, like so:
Select the content you want to hide
Head to Styles on the toolbox
Uncheck the mobile icon under Responsive > Display
ℹ️ Watch this 1-minute video on hiding your content from mobile users 📱
Still need help? Reach out to our customer success team who will be happy to help ✨