Custom list questions

Create a styled version for list questions with styling options that are not available by default.

Introduction

Sometimes you want to style your list questions like cards. An example of this can be seen below:

This tutorial includes custom CSS code. A basic understanding of CSS is required to fully comprehend it, but you can also copy and paste the code into the Custom Code tab.

How to create custom list questions

We will create the custom list question by using images. Do the following steps to

  • Add a “Multiple Choice” element
  • Click “Use Images”
  • Set the desired amount of items per row
  • Add images in the “Options” of your component

Next, we will style the images to ensure they scale correctly and look great on every screen size. To do this, go to the Custom Code tab and use the following CSS:

CSS
.cc__radio-question-item--image-image {
  height: auto;
  aspect-ratio: 364/177;
  border-radius: 20px;
  box-shadow: 0px 0px 17px 0px rgba(62, 62, 62, 0.16);
  margin-bottom: 20px;
}
  • The CSS class-name .cc__radio-question-item--image-image can be found by using the Inspector of your web browser. A complete list of available classes can be found here.
  • We set the height to auto, and define the image's aspect ratio. You must set the aspect ratio based on your asset. In our case, that ratio was 364/177, which indicates a width of 364 and a height of 177 pixels.
  • We used border-radius and box-shadow to style the images further.

The default checkbox is positioned near the edge of your card at the bottom right. To adjust the checkbox position to better align with the background image, we used the following code:

CSS
.cc__radio-question-item--image-image div {
  bottom: 20px; 
  right: 20px;
}
We also want to add some extra spacing to the cards using padding, so they don't touch each other. You can do this with the following CSS code:
CSS
.cc__radio-question-item--image:nth-of-type(odd) {
  padding-right: 10px;
}

.cc__radio-question-item--image:nth-of-type(even) {
  padding-left: 10px;
}

@media (max-width: 576px) {
    .cc .cc__radio-question-item--image:nth-of-type(odd), .cc .cc__radio-question-item--image:nth-of-type(even) {
      padding-left: 0px;
      padding-right: 0px;
    }
}
  • We use :nth-of-type(odd) and :nth-of-type(even) to target the odd and even cards, so we don’t get margins on the wrong sides of the cards.
  • On mobile, we disable the left and right padding using a media query.

And that's it. With some custom CSS code, you can modify any element in the canvas and style it according to your needs.

Related articles

Learn more about custom list questions in one of the following articles