Responsive design means your content adjusts to different screen sizes and devices so users can read, navigate, and complete tasks without friction.
When you build content in Candu, you can:
Make one version that adapts across devices. Candu's responsive controls let you change how the same components appear in each viewport and create experiences that adapt to desktop, tablet, and mobile. For content such as banners or forms, responsive styling is usually enough.
Show or hide versions based on viewport and create separate versions of your experiences. If your page has multi-section layouts or is complex, a mobile or tablet version often needs a fundamentally different structure. In these cases, we recommend you build a simplified mobile or tablet design or hide the desktop version from mobile users entirely.
How Responsive Controls Work in Candu
Viewport Switcher
At the top of the Candu editor, you'll see three viewport buttons:
These let you preview and adjust your content for each screen size. Click between them as you work to see how your content looks for each view.
Responsive controls cascade from desktop to mobile/tablet viewports.
Settings you apply in Desktop become the default for Tablet and Mobile. If you override a setting in Tablet, that becomes the new default for Mobile. You can then override again in Mobile if needed.
Also note:
The styles for tablet will only apply to screen sizes smaller than 1199px wide.
The styles for mobile will only apply to screen sizes smaller than 699px wide.
Responsive Controls for Mobile / Tablet
On the right side, in the toolbox, you'll find responsive controls for three key areas:
Layout
Controls how your component behaves on the page. Flex settings only appear when Display is set to Flex.
Display options:
Block: Default for most components. Stacks vertically, takes full width.
Flex: Unlocks all Flex settings (direction, wrap, alignment, column gaps).
Inline Block: Places elements side by side.
Hidden: Lets you show or hide the component on the specific screen size.
Flex settings
Content direction:
Set to Horizontal or Column (vertical).
For responsive layouts, place Layouts inside a Flex parent set to Horizontal, then allow wrapping.
Wrap mode:
Use Wrap mode to get content to stack on top of each other on smaller screen sizes.
Alignment options:
Vertical: Use Stretch, Start, Center, End, or Baseline to position your content. For example, Stretch works well when you have varying text lengths but want your cards to all be consistent in height.
Horizontal: Use Start, Center, End, Space Between, Space Around, and Space Evenly to position your content in a view layout or card instead of using margins and padding (too much padding/margin can prevent your content from remaining in the correct format as the page reduces in size).
Column Gap:
Use this to add space between components aligned in a component set to horizontal direction.
Row Gap:
Use this to add space between components aligned in a component set to vertical/column direction.
Size
Controls how big the component can be and how it behaves when space is limited.
Available options:
Overflow:
Show
Hide
Scroll
Auto
Explicit Width and Height (px or %)
Min/Max Size (to prevent components from getting too big or too small)
Best practices for size:
Use 100% width (or leave it unset) rather than fixed pixels as the content won't adjust down as screen size reduces.
For large images, use % sizes to ensure they are responsive.
For smaller images, like icons, use pixel sizing to ensure they remain small as content grows.
Set min-width/height or max-width/height in pixels when your width/height is set to 100%. This helps create responsive content that won't go above or below a certain size in pixels.
Spacing
Controls space around or inside a component.
Margin: Adds space outside the component.
Padding: Adds space inside the component.
Tip: In Candu, you can control margin and padding for all four sides (top, right, bottom, left) at once by clicking the 🔗 or individually.
Flex Child Settings on Desktop
Flex Child settings control how a component behaves inside its Flex parent. How much space it takes, whether it grows or shrinks, and its proportional size.
If the structure is not defined in the Desktop viewport, it leads to inconsistent or broken experiences on other viewports.
These settings appear only when the parent is set to Display = Flex and you are in the Desktop viewport:
Grow if possible
Allows components to expand or grow when extra space is available in the parent container.
When to use it:
When you want a component to fill remaining vertical or horizontal space.
When you want to avoid using large margins or padding to "push" content into place.
Example: A layout with Grow if possible and End alignment can stretch to fill vertical space cleanly. This avoids fixed margins that would break on smaller screens.
Shrink if necessary
Allows the component to compress when the parent container becomes too small.
When to use it:
When your layout needs to adapt on smaller screens without overflowing.
When you want items in a row to stay visible and reflow rather than force horizontal scroll.
Flex base size
Keeps the structure of components consistent while allowing content to shrink or wrap as needed. You'll maintain visual hierarchy without locking components into fixed dimensions.
When to use it:
When you need proportions between elements to scale as screen sizes change
When you need to avoid fixed pixel width that don't adapt
Alignment options:
Vertical: Choose whether you want your content to stretch and fill the space, be top/bottom aligned, centered, or select baseline.
Horizontal: Choose whether you want your content to stretch and fill the space, be left/right aligned, centered, or select baseline.
Prefer to see this in action? Watch how to create a responsive banner: