Skip to main content
All CollectionsDeveloper DocsHow-to's
Arranging Content in a Single Row Using CSS
Arranging Content in a Single Row Using CSS

#custom-css #design #developer #quiz #results

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

This guide can be used to create a single-row layout for content in your quiz using custom CSS styling.

πŸ’‘ What you'll learn


πŸ’‘ 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-product-block is a CSS class that is attached to all content blocks in a results page.

.oct-quiz-top_content

.oct-quiz-top_content is a CSS class that is attached to all TOP CONTENT sections in question pages as well as content blocks.

.oct-quiz-product-block > .oct-quiz-top_content

By using the > selector, we can specifically target the TOP CONTENT sections of content blocks giving us control over the exact part of the quiz our code is targeting.

If we targeted .oct-quiz-product-block only, we would apply our CSS code to all parts of a content block including products.

Targeting .oct-quiz-top_content would result in targeting TOP CONTENT in questions as well as content blocks.

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 display: flex rule is all we need to align our content horizontally.

gap: 3em;

The gap property lets us add a standardized gap between each element inside of a flexbox.

3em is the distance of the gap.

Other units can be used for gap, for example 16px or 5%, but the em unit is a relative measurement which makes it more responsive to different screen sizes & resolutions.

Without the gap property, each element inside of our flexbox would have no spacing between each other.

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;
}

Did this answer your question?