Skip to main content
All CollectionsCreating Content with CanduHow to use Candu's EditorResponsiveness and Mobile
Creating Responsive Content

Creating Responsive Content

Want to create content that works across all screen sizes? This article walks you through a step-by-step guide to doing just that!

Flora Sanders avatar
Written by Flora Sanders
Updated over 9 months ago

How to use Candu's Responsive Controls

The article aims to give you the tools to utilize Candu's responsive controls to create one content version that works well across all devices and screen sizes.

Note ✨ : Responsive Controls cascade down, meaning if you create your desktop version, that will be the default and pull through to your Tablet and Mobile viewports.

You can override settings on components in the Tablet viewport, these will be the new default settings for those components in your Mobile viewport, which you can choose to override there!

To help demonstrate this, we've picked an example of building a responsive banner to show how our responsive controls work and how to use them effectively! You'll then be able to use those skills when creating all of your content, no matter what type 🚀

To create this banner example, you'll need to:

  1. Drag in a Card from Palette > Component, set it to be Dismissible in the toolbox on the right, add a background color #fafafa, and set it to Row for Content Direction.

  2. Drag in two single view layout components, set the left to be 70% base size and the right to be 30% base size:

    Screenshot of the left layout set to 70% base size

  3. Drag on the Header 3 and Paragraph Typographies and a Button to the left view layout. Then drag an Image component to the right view layout and center it:

    Image showing all components adding and ready to be customized

  4. Customize your typography and button copy, choose your image, and set the image to 100% width:

    Image showing finished desktop design

  5. Add interactions for your Button and image components, to open a URL and trigger an Overlay retrospectively:

    Image showing button interaction set to open a URL
    Image showing image interaction set to trigger an Overlay

  6. Your content looks great in the Desktop view! Let's check it works as expected across all display Viewports - it looks great in Tablet (although we might want to tweak the text size a bit):

    Image showing how the content looks in tablet view

  7. It needs some tweaking in the Mobile view - Note: changes we make here will only impact screens between 0-699 px in width:

    Image showing mobile version before we made any tweaks

  8. The base sizes work well in Desktop and Tablet view, but here we'll want to either set it to auto or to 100% base size, and set the Card to Wrap (so that the layouts can stack on top of each other!):

    Image showing how to set the Card to wrap mode

  9. We can change the text size and also set the typography and button to be center aligned:

    Image showing the typography center aligned.

  10. Now, you can decide whether you want to keep the image for your Mobile design or hide it - to hide it, select the layout and click Hide on the display options in mobile:

    Image showing the view layout containing the image being hidden on mobile view

    The finished responsive design works well across all three display ports 🙌

    GIF showing the responsive content across the three viewports

  11. Launch it out in the wild 🚀
    ​

ℹ️ Watch this 6-minute video guiding you through creating a responsive banner.

Still need help? Reach out to our customer success team who will be happy to help ✨

Related Articles
Editor Tips and Tricks
Responsiveness Overview
Creating a separate mobile experience
Creating a responsive form
Creating Banners
Did this answer your question?