CSS editor – 40+ quiz styles and hacks

We get this question a lot. Riddle’s CSS editor (Enterprise plan) is incredibly flexible – and you can change almost any visual element to match your site’s look and feel.

Check out this spectacular poll by soccer publisher 90min – to promote the launch ‘Game Night’:

Here are some examples – so you can see this feature in action. Simply paste the sample code into the CSS editor box in the style tab. 

(Not an Enterprise user? Let us know at hello@riddle.com – we can give you access to the CSS editor so you can test this out.)

Display quiz image answers in one column (ideal if you want larger images):

.image-choice {
width: 100%;
float: none;
}

View example here: https://www.riddle.com/view/134669

Make your custom logo bigger (hurrah for custom branding!):

.custom-logo, .riddle-logo img {
max-width: 500px!important;
max-height: 500px!important;
}

Want larger text?

This will make your text larger – in this case the description text of your quiz. Choose your text size (1em = 12px in Riddle, 2em = 24px, .5em = 6px etc.):

Change the font for all of your quiz text:

*{font-size: 50px;}

.description {
font-size: 2em;
}

Change the size of a particular type of text?

• Title: h1.title.txt2 {font-size: 50px;}
• Description: .description *{font-size: 12px;}
• Answers: .choice .txt2{font-size: 16px;}
• Footer text: .footer-content *{font-size: 20px;}

Hide the border around your quiz:

.riddle-frame {
letter-spacing: .4px;
border-radius: 0px;
border: 0px!important;
}

Make ‘Start’ button square:

.riddle-frame .content-div .footer-content .start-btn {
width: 70%;
padding: 0px;
border-radius: 2px;
padding: 15px 0;
}

40+ more CSS hacks:

We’re always helping our partners with their own CSS style requests – so we’ve compiled this growing database of over 40 CSS tweaks and stylings you can apply to your own quizzes.

Don’t see what you need?

Just give us a shout at hello@riddle.com or on support chat – our team of CSS gurus are happy to lend a hand!