Please note: these customization ideas will require you to add a bit of CSS to your quiz which is a feature available on our paid plans.

You can edit the CSS by clicking on the green button titled "Edit Quiz Flow CSS", which will open the CSS Editor where you can write your custom code.

1. Centering Questions, answers and buttons

This can be done using the following CSS. This will center the elements correctly for both mobile and desktop/large screen views.

.question-heading {

text-align: center;

}

.next-question-button-container {

display: flex;

justify-content: center;

align-items: center;

}

.all-answers {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}`

`.answer-text-with-image {

text-align: center;

.answer-text {

text-align: center;

}`

`@media (max-width: 1024px) {

.all-answers {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

}

Here’s the result:

2. Adjusting the number of answers per row

Changing the number of answers per row for answers with images is an easy feature to correct with custom CSS o accommodate your store's needs.

With each question, you might want to have a slightly different number of answers per row depending on the content and size of your images. In our example, one of our questions requires our customers to pick from a set of 4 color swatches. This is the default look of the screen on desktop:

We want all 4 color swatches to fit on one row on the desktop view. To make this happen, we need to change the width of each answer on large screens only.

@media (min-width: 1024px) {

.answer {

width: calc(25% - 16px);

}

}

If you've previously centered the questions and answers as we did above, you can make the width even smaller, for example, 20%:

@media (min-width: 1024px) {

.answer {

width: 20%;

}

}

Here is the result for large screens where questions and answers are centred. Our mobile view remains the same.

3. Changing the shape and size of answers with images

Landscape

If the images you want to use are significantly wider than they are tall, you can use the following CSS to change the width and height of your answers for the desktop view:

@media (min-width: 1024px) {

.answer {

width: 540px;

height: 320px;

}

.answer-image-container {

width: 540px;

height: 270px;

}

}

We specify this change only applies to large screens using the @media {} query. The number of pixels can of course be edited to better suit your images, and you can use this CSS as a starting point to create this effect in mobile view as well.

@media (max-width: 1024px) {

.answer {

width: 240px;

height: 170px;

}

.answer-image-container {

width: 240px;

height: 140px;

}

}

Please take care to keep the width the same for both elements and the height of the .answer selector is bigger than the height of the .answer-image-container selector.

Here is the result with centered content:

Portrait

Similarly, the following CSS can be applied if your images are much taller than they are wide:

@media (min-width: 1024px) {

.answer {

width: 340px;

height: 700px;

margin: 30px;

}

.answer-image-container {

width: 340px;

height: 640px;

}

}

In this example, we’ve also applied a bit of margin to the .answer selector as we only have 2 answer options and we want to space them out slightly.

Same as with our landscape example, we specify this change only applies to large screens and only to one particular question. The width is the same for both elements and the height of the .answer selector is bigger than the height of the .answer-image-container selector.

Perfect Square

Here’s some example CSS that can be applied:

@media (min-width: 1024px) {

.answer {

width: 250px;

height:300px;

border-radius: 0;

}

.answer-image-container {

width: 250px;

height: 250px;

}

}

And here is the result:

Please note that we’ve added a border-radius: 0 property to make the corners perfectly square rather than rounded.

4. Adjusting Image fit

You might find that you’ve applied the above changes to the shape of your answers with images, but your actual images aren’t fitting properly. In this case, it’s a good idea to test different ‘object-fit:’ settings that apply to the .answer-image-contianer selector.

.answer-image-container {

width: 540px;

height: 270px;

object-fit: contain;

}

The object-fit property is used to specify how an image should be resized to fit its container. Here are some examples of how to use this property:

1. fill: This is the default value. The replaced content is sized to fill the element's content box. If necessary, the image will be stretched or squished to fit.

2. contain: The image is scaled to maintain its aspect ratio while fitting within the element's content box.

3. cover: The image is sized to maintain its aspect ratio while filling the element's entire content box. The image will be clipped to fit.

4. scale-down: The image is sized down to maintain its proportions and fit the container (which would result in a smaller image).

5. Targeting specific questions

Sometimes, you might not want certain changes to apply to all the answers with images in your quiz, but rather only to specific questions. This is why we've introduced the .question-n selector which allows you to target the specific questions based on their number.

Here's for we target only the 3rd question in the quiz:

@media (min-width: 1024px) {

.question-3 .answer {

width: 540px;

height: 320px;

}

.question-3 .answer-image-container {

width: 540px;

height: 270px;

}

}

Please note: this method does not work with logic jumps as question numbers will be different when someone is taking the quiz. If you are using logic jumps we advise that all your answers with images have the same CSS applied across the whole quiz.

And there you have it! Four customizations and ideas of how to better adapt the look of your quiz when using answers with images.

For full assistance with CSS styling and quiz design customizations please contact our support team at support@productfinder.app and enquire about our Enterprise plan.