About Mobile in Candu
Candu works on mobile web, when users access your site in a mobile browser like Safari or Chrome. Candu does not work inside native mobile apps (iOS or Android).
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. Responsive controls let you adjust how the same components appear in each viewport, so a single experience works on desktop, tablet, and mobile. For banners and forms, responsive styling is usually enough.
Show or hide components by viewport, and create separate versions of your experiences. If your page is complex or has multiple sections, mobile and tablet often need a different structure. In those cases, build a simplified tablet or mobile version, or hide the desktop version for smaller screens.
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 Tablet to Mobile.
Desktop settings are the default. Tablet overrides Desktop, and Mobile overrides Tablet. You can override again in Mobile if needed.
Also note:
Tablet styles apply below 1199px.
Mobile styles apply below 699px.
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 (row) or Column (vertical).
For responsive layouts, put your child Layouts inside a parent Layout set to Display: Flex and Direction: Horizontal, then enable Wrap.
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 relying on margins and padding. Heavy margin or padding can stop layouts from reflowing cleanly as the screen gets smaller.
Column Gap:
Use this to add space between components when the parent is set to Horizontal direction.
Row Gap:
Use this to add space between components when the parent is set to 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 width unset) instead of fixed pixels. Fixed widths won’t shrink as the screen gets smaller.
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 responsive content stay within a sensible pixel range.
Spacing
Controls space around or inside a component.
Margin: Adds space outside the component.
Padding: Adds space inside the component.
Tip: You can set margin and padding for all four sides at once using the linked (chain) control, or unlink it to edit each side 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.
Set up your Flex structure in Desktop first. If the parent and child behavior isn’t defined there, Tablet and Mobile overrides can behave inconsistently.
These settings appear only when the parent is set to Display: Flex, and you’re editing 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 space in its parent.
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 to smaller screens without overflowing.
When you want items in a row to stay visible and reflow rather than force a 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 want to avoid fixed pixel widths 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 your content stretches to fill the space, aligns left or right, or stays centered.
Watch how to create a responsive banner