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:
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.
Drag in two single view layout components, set the left to be 70% base size and the right to be 30% base size:
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:
Customize your typography and button copy, choose your image, and set the image to 100% width:
Add interactions for your Button and image components, to open a URL and trigger an Overlay retrospectively:
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):
It needs some tweaking in the Mobile view - Note: changes we make here will only impact screens between 0-699 px in width:
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!):
We can change the text size and also set the typography and button to be center aligned:
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:
The finished responsive design works well across all three display ports 🙌
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 ✨