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.
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!
Once you can create a responsive banner, you'll be a 🥇 Responsive Pro 🥇 and you'll 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 and set your card to Wrap mode (so that the content can stack on top of each other on a smaller screen).
Leave the sizing as unset or 100% width to be responsive (always avoid fixed px as when you reduce your screen size to tablet, the fixed pixels will prevent the content from adjusting down).
Set the Card to display on mobile, tablet, and desktop view and drag on your two parent view layouts - set the left one to 70% and the right one to 30% base size.
Drag on the three Typographies to the left view layout and customize.
Drag on another view layout under the left one, set it to Row direction, and drag on the two Buttons. Customize their copy, set their Interactions, and add their Interaction Labels.
Drag on the Image component, set it to 100% width, and add your chosen image.
Check the content works as expected across all display Viewports.
The finished responsive design works well across all three display ports. The content stretches out for tablet and desktop view and then wraps down for mobile, so the text and buttons stack on top of the video thumbnail:
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 ✨