Responsiveness Overview

What is responsiveness? How can I make my Candu content responsive? Want tips for creating a responsive design? We've got you covered!

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

What is responsive design?

Responsive design ensures that your content adapts to different devices and screen sizes, enhancing usability and engagement for users. Let's dive into what responsive design entails and how it can benefit your Candu experiences!

You can use responsive controls to tweak and adjust the same components to appear differently across different viewports:

  • e.g. If your header typography is size 48 for the desktop view, you can make it size 34 for tablet and size 20 for mobile.

  • e.g. If your layout is 960px wide for desktop, you can make it 600px for tablet, and hide it for mobile.

You can utilize Candu’s responsive controls to create one version that's optimized across all devices. Alternatively, you can create separate versions for desktop, tablet, and mobile and hide/display each version on the relevant device! Either way, you're improving usability and increasing user adoption.

Check out our guides on using Candu's responsive controls to...

When should you create responsive components vs creating separate versions for each?

  • For more complex designs like homepages with lots of components, e.g. checklists, cards, videos, etc. we’d recommend creating a separate mobile version (either a stripped down/less noisy version or hiding it from mobile users altogether).

  • When it comes to more simple content like banners, cards, etc., or when creating forms, we’d recommend trying to make that responsive across all devices and screen sizes!

Candu’s responsive controls and tips for using them:

If the parent component is set to flex, the components in your parent component will have additional Flex Child options, which allow you to position your child component within your parent component.

> Flex Child Settings

  • Grow if possible

screenshot of grow control
  • Use Grow if possible to get content to increase in size if space allows.

  • E.g. view layout with 'Grow if possible' plus 'End' content alignment to take up vertical space without using margins (margins would make the content less responsive).

GIF showing Grow if possible in action
  • Shrink if necessary

screenshot of the shrink control
  • Use Shrink if necessary to get content to reduce if space doesn’t allow.

  • Flex Base Size

screenshot of the flex base size control
  • Set base sizes for your View Layouts, e.g. 50% each to make two columns or 70% for one and 30% for the other. This allows the content to reduce in size as screen size reduces, whilst maintaining the same structure!

GIF showing a Flex Base Size of 70% being added


  • Vertical

screenshot of the vertical alignment control
  • Choose whether you want your content to stretch and fill the space, be top/bottom aligned, centered, or select baseline:

GIF showing vertical alignment in action
  • Horizontal

screenshot of the horizontal alignment control
  • Choose whether you want your content to stretch and fill the space, be left/right aligned, centered, or select baseline:

GIF showing horizontal alignment settings

> Layout Settings

  • Display

screenshot of display controls
  • Block: Most components are set to block by default, e.g. buttons, text, images, etc. They stack vertically and take up the full width available.

  • Flex: Components like layouts and cards can be set to flex, allowing you to change content direction, alignment, gaps, and whether it wraps or not!

  • Inline Block: This option places content horizontally - use this for form input fields to get the label and field to sit side by side rather than stacked.

  • Hidden: This option lets you hide components on different screen sizes.

GIF showing display options in action
  • Content Direction

screenshot of content direction control
  • Set your Content Direction to Column or Row:

GIF showing changing the content direction impacts design
  • For responsive content, use view layouts nested in view layouts with the parent set to Flex and Row direction rather than column layouts (You can wrap view layouts which makes them more responsive - see next point).

  • Wrap Mode

    screenshot of wrap mode control
    • Use Wrap mode to get content to stack on top of each other on smaller screen sizes:

GIF showing wrap mode in action
  • Vertical

screenshot of vertical alignment control
  • Use Stretch, Start, Center, End, or Baseline to position your content.

    • For example, Stretch is great if you have varying text lengths but want your cards to all be consistent in height:

GIF showing vertical layout alignment in action
  • Horizontal

    screenshot of horizontal alignment control
    • 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).

GIF showing horizontal layout alignment in action
  • Column Gap

screenshot of column gap control
  • Use this to add space between components aligned in a component set to horizontal/row direction.

GIF showing column gap in action
  • Row Gap

screenshot of row gap control
  • Use this to add space between components aligned in a component set to vertical/column direction.

GIF showing row gap in action

> Size Settings

  • Explicit size

Screenshot of size controls
  • Use 100% width (or leave it unset) rather than fixed px in the explicit size as the content won't be able to adjust down as a screen size reduces.

GIF showing content set to 100% width reducing down on smaller screen sizes
  • For images, if large then use % size to ensure they are responsive. If they are small images, e.g. icons, then use px to ensure they remain small if the content grows!

Screenshot showing images set to px

Responsive Size

Screenshot of toolbox - responsive min/max size
  • If the explicit width/height is set to 100%, you can set min/max responsive widths/heights in px to create responsive content that won't go above or below a certain size.

GIF showing adding a max width
  • Overflow

screenshot of overflow control
  • Use this to add a scrollbar if you have more content to show that space permits.

GIF showing overflow in action

> Spacing Settings

Screenshot of toolbox - spacing
  • Margin and Padding should be used to create space around the individual components rather than spacing your components out in your design. As mentioned above, there are many ways to effectively create space in your designs (space between, space around, space evenly, grow if possible, etc.).

    • Margin creates space around a component.

    • Padding creates space within a component.

  • You can set px, %, or Auto (Auto creates centers the content).

  • Don't use negative margins unless you want the content to overflow.

ℹ️ Watch this 6-minute overview of Candu's responsive controls

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

Did this answer your question?