This guide can be used to create a single-row layout for content in your quiz using custom CSS styling.
💡 What you'll learn
Before getting started (jump to section)
Sample code (jump to section)
Modifying the code (jump to section)
Resizing the content (jump to section)
Changing the gap between content (jump to section)
Targeting bottom content (jump to section)
Targeting a specific content block (jump to section)
Targeting content in a non-results page (jump to section)
💡 Prerequisites
Developer tools are available on the Octane Plus plan.
Using these features will require you to create custom code on your website that targets with your desired developer tool. This document serves as a starting point for those with the technical proficiency to build the next steps.
Before getting started
Here's a guide that explains how you can target a quiz with your own CSS code.
The content in this guide is only an example of what you can do with CSS. Many other methods exist and specifics may differ depending on your quiz content & use cases.
Octane AI will only be able to provide support on the content within this guide. A certain level of technical proficiency is recommended in order to make changes beyond the examples shown in this article.
For further reading, check out the following documentation:
Sample code
When content is added to a quiz in the TOP CONTENT or BOTTOM CONTENT sections of a page, content will be aligned in a single column by default.
The code below is an example of one method you can use in CSS to change this alignment.
📕 Copy this code to create a single-row layout
.oct-quiz-product-block > .oct-quiz-top_content {
display: flex;
gap: 3em;
}
As long as custom CSS is enabled for your quiz, you can copy and paste this code into your website to make all TOP CONTENT in your quiz's results page aligned in a single row.
While a certain level of expertise in CSS will be required to effectively manipulate this code, examples of how to modify this code will be provided below as a starting point.
Modifying the code
This section provides some tips on how to modify the sample code provided in the previous section. This can be used as a starting point for understanding how to manipulate quiz styling using CSS code.
First, we'll break down what each part of the code snippet represents.
.oct-quiz-product-block > .oct-quiz-top_content {
display: flex;
gap: 3em;
}
Code | Explanation |
.oct-quiz-product-block |
|
.oct-quiz-top_content |
|
.oct-quiz-product-block > .oct-quiz-top_content | By using the
If we targeted
Targeting |
display: flex; | This property turns our TOP CONTENT into a flexbox.
Flexbox allows us to control the layout of elements inside of the flexbox in a responsive, cohesive manner instead of having to apply styling rules to each individual element.
By default, elements inside of a flexbox will be aligned in a single row. This means simply applying the |
gap: 3em; | The
Other units can be used for
Without the |
Resizing the content
Content inside of a flexbox will often expand to take up the maximum amount available.
When using images in a flexbox, this can cause images to take up a disproportionate amount of space and crowd out text content.
The best way to change this is by using the Max width setting inside of the quiz editor, which allows you to set the maximum amount of space an image can take up in px. Other content in the same block as the adjusted image will re-adjust to take up the remaining space.
Changing the gap between content
By default, content in flexboxes have a gap of 0.
To adjust the gap between content, simply adjust the value of the gap property in the CSS rule.
The em unit is recommended for responsiveness, but the exact distance of em will be relative to your website's font size settings. You can experiment for the right value using whole numbers and decimals (for example, you may find 2.5em fits better than 2em or 3em) or you can use exact px values (i.e. 16px or 24px, etc.).
Targeting bottom content
The sample code snippet provided specifically targets TOP CONTENT only. Here's how you can alter the code to target different content sections.
📕 Targeting BOTTOM CONTENT only
.oct-quiz-product-block > .oct-quiz-bottom_content {
display: flex;
gap: 3em;
}
In the code above, we change the class we're targeting from .oct-quiz-top_content to .oct-quiz-bottom_content.
📕 Targeting TOP CONTENT & BOTTOM CONTENT
.oct-quiz-product-block > .oct-quiz-top_content,
.oct-quiz-product-block > .oct-quiz-bottom_content {
display: flex;
gap: 3em;
}
In the code above, we use a comma to target the top & bottom content sections of content blocks with the same rule.
Targeting a specific content block
If you want to target a specific content block on the results page, rather than all content blocks, you'll need to add a keyword called :nth-child().
📕 Targeting the 1st content block in a results page
.oct-quiz-product-block:nth-child(2) > .oct-quiz-top_content {
display: flex;
gap: 3em;
}
The number defined inside of :nth-child() counts the elements inside of a container from top to bottom. On results pages, the 1st element is the title - which is why .oct-quiz-product-block:nth-child(1) won't target a content block, since :nth-child(1) here will point to the page title.
Instead, start with :nth-child(2) since content blocks start from the 2nd element inside of a results page container.
Change the number inside of .nth-child(n) to target a different block. For example, .oct-quiz-product-block:nth-child(4) would target the 3rd content block on the page.
📕 Targeting the first 3 content blocks in a results page
.oct-quiz-product-block:nth-child(-n + 4) > .oct-quiz-top_content {
display: flex;
gap: 3em;
}
Targeting content in a non-results page
Each page in Octane AI quizzes has a TOP CONTENT and a BOTTOM CONTENT section. If you'd like to adjust the layout of content in quiz pages, you can make the following adjustments.
📕 Targeting all TOP CONTENT sections in a quiz
.oct-quiz-top_content {
display: flex;
gap: 3em;
}
📕 Targeting TOP CONTENT sections excluding results pages
.oct-quiz-content > .oct-quiz-top_content {
display: flex;
gap: 3em;
}