HD Quiz

Hi Norbert.

Can you try increasing your selection specificity?

Something like

.hdq_quiz_wrapper .hdq_result_title {} should work better. (And keep the ! important) rule you were using

Hi Dylan,

thanks for your suggestion to increase the CSS specificity using:

.hdq_quiz_wrapper .hdq_result_title {
font-size: 1.2em !important;
}
We added it to our custom CSS panel in the HD Quiz Styler (Pro version), alongside other rules that work perfectly. Unfortunately, this one has no effect at all – neither on desktop nor mobile.

We also tested:

Clearing all caches

Using even more specific selectors

Adding the rule both inside and outside the Styler panel

No matter what we try, the outcome title text size stays oversized. Everything else styles fine, just this part seems hardcoded or resistant to overrides.

Temporary workaround:
We’ve now removed the full outcome titles and replaced them with emoji (e.g. 🦡) directly in the title fields. Then we include the proper descriptive text and a header inside the result box (styled manually). This works – but it’s more of a patch than a fix.

You can see this here: https://fantasykosmos.de/fantasy-persoenlichkeitstest-welches-abgelehnte-fabelwesen-waerst-du/

Is there a way to directly target or override that outcome headline? Or is it being injected in a way that prevents external CSS control?

Thanks in advance for any insight – and keep up the good work otherwise!

Best regards,
Norbert
Fantasykosmos.de

Hi Norbert, thanks for checking your cache as that can be a very common issue.

What I think is happening is that your site is being VERY specific on how it’s styling its headings. Either that or something on your site is overriding your styles.

In fact, inspecting your site, I see that you have a stylesheet that has been created and inserted by your cache plugin WP Fastest Cache. Inside of that is the following CSS.

/* === Ergebnis-Titel – NEU definiert für maximale Wirkung === */
.hdq_quiz_wrapper .hd_quiz_results .hdq_result_title,
.hdq_result h2,
.hdq_quiz_wrapper h2.hdq_result_title {
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
    color: #093a31 !important;
    font-family: "Playfair Display", serif !important;
    font-weight: normal !important;
    text-align: center !important;
    margin-bottom: 1em !important;
    word-break: break-word;
}

And this code IS properly affecting the Results title on your site. Since I can see your changes, and see that they are correctly affecting the font-size of your headings, unfortunately, we are right back at an cache issue.

Luckily, since I can correctly see the correct styles on my end, we know that the issue is not WP Fastest Cache. Instead, the issue is probably with your browser cache.

Hi Dylan,

thanks for digging into it! You’re absolutely right – that specific block of CSS is ours and was added intentionally to tame the unruly heading behavior. The problem, however, is not whether styles are being injected – they are.

The issue is this: no matter how we tweak the font-size, the outcome title remains visually unchanged on our frontend, even after:

clearing all caches (WP Fastest Cache + browser)

regenerating the CSS file

testing on multiple browsers and devices

tweaking the CSS from both the Styler panel and the global customizer

And yet, when inspecting via DevTools, all changes are technically “applied” – just not visibly rendered. It behaves almost like the outcome title is injected inside a JavaScript-controlled wrapper that overrides computed values at runtime. Could that be the case?

Our current workaround:
We stripped the titles down to emoji (🦡, 🐌, etc.) and then placed proper H2 headlines inside the result box, fully stylable as normal HTML. It’s not elegant, but it works.

So we’re basically asking: is the outcome title technically hardcoded or JS-controlled in a way that overrides visual rendering, even if CSS applies? If so, that’s fine – we’ll just continue with the emoji hack. 😉

Thanks again for your time and support!

Cheers,
Norbert
Fantasykosmos.de

It’s certainly possible that there is some JavaScript on your site that runs on page load that modifies the fonts, but if so, it is not caused by HD Quiz.

This does give me an idea though. Fight JavaScript with Javascript!

We can try adding our own script that runs on a delay (it’s safe to do this since the results area is hidden until quiz completion), that forces the fonts back to what you want. I think this will works since when I edit your DOM directly to add titles back in, it works and looks great. This implies that the bad styles are applied on pageload, probably by JavaScript as you think.

First, update your CSS and change it to:

.hdq_result.hdq_result_title {
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
    color: #093a31 !important;
    font-family: "Playfair Display", serif !important;
    font-weight: normal !important;
    text-align: center !important;
    margin-bottom: 1em !important;
    word-break: break-word;
}

Remove the other selectors you have.

The next step will require you to add the following code to your theme’s functions.php file. BACKUP THE FILE before modifying in case you make a mistake. Let me know if you are uncomfortable with doing this and I can add this code to a custom addon for you instead.

// Tell HD Quiz to run a custom function when it initializes
function hdq_kosmos_init($quizOptions)
{
    array_push($quizOptions->hdq_init, "hdq_kosmos_init");
    return $quizOptions;
}
add_action('hdq_submit', 'hdq_kosmos_init');

// add custom scrupt to all quizzes
function hdq_kosmos_before_content($quiz)
{
    ?>
<script>
function hdq_kosmos_init()
{
    const res = document.getElementsByClassName("hdq_result");
    for(let i = 0; i < res.length; i++){
        res[i].classList.add("hdq_result_title");
    }
}
</script>
    <?php
}
add_action("hdq_before", "hdq_kosmos_before_content");