HD Quiz

Need to send invoices?
Check out my new WordPress plugin HDInvoice
Limited time launch sale

Answer toggle doesn’t look right on mobile (testing on iPhone)

Published: November 15, 2023
Support status: closed

On desktop, the multiple choice answers look perfect, but on mobile I get checkboxes with repeating answers on different lines. I only have an iPhone to test. The button for Finish also doesn’t look right. Imgur example below… What can I do to fix this that doesn’t involve changing the theme?

View post on imgur.com

thread author: Johnny

Hi Johnny, this is almost certainly a caching issue. It looks like on your site, the mobile stylesheet is not loading.

Please clear all the caches you can think of.

  1. site cache (if using a caching plugin)
  2. check your host too! Some hosts use their own cache.
15 November 2023 — 23:00 support admin - Dylan

Thank you for your quick response. I have disabled and purged cache both locally and on WPEngine but the problem persists. Do you have any other advice? Much appreciated! This is a really great quiz plugin and I hope to use it a lot!

16 November 2023 — 11:11 thread author - Johnny

One more clue… it looks fine on my iPhone if I use Chrome. Safari and Firefox are the broken ones!

16 November 2023 — 11:17 thread author - Johnny

FIXED!

My web designer copy and pasted all your CSS into the “Custom CSS” section of WordPress.

We aren’t sure why that works, but it did. 🙂

So we are good to go! Just wanted to let you know.

16 November 2023 — 11:32 thread author - Johnny

First, I’m glad that you got it working, but the Custom CSS solution should really only be considered a temporary fix! With that, the styles are going to be loading on every single one of your pages, instead of just pages that have quizzes.

I’ll try my best here to explain what I think the issue likely is on your site, and the steps to try and fix.

When I responded yesterday, I was on my phone so was not able to view the source code of your site. Now that I can, I can see some serious issues with the site that should be fixed ASAP. Please send this to your web designer.

The “architecture” of a website works by nesting elements.

Every single webpage NEEDS to open with an html tag, and end in an html tag. There can only be one of these on a page. Likewise, inside of that html tag, there needs to be both a head section and a body section – only one of each.

Your site however, seems to be duplicating content.
From what I can see, the site is printing some things twice, mainly the header, but the duplication is nested so it’s hard to visually parse out.

Here is a screenshot of the last 4 lines in your rendered HTML, as a nice clean proof of what I’m talking about.

View post on imgur.com

As you can see, there is a closing body tag, followed by a closing div (which is impossible. This is already invalid HTML), followed by another closing body followed by a last closing html.

That code should look like </div></body></html>

Your site also has a bunch of JavaScript errors from frontend.min.js (a file that comes from your theme) about not being able to find a variable called astra. This is almost certainly caused by the broken code on the site, and is affecting – who knows what else. Certainly performance, compatibility, and even SEO though.

This issue does not happen on your homepage, but appears on each of your posts. So the best advice I can give to you and your designer is to take a look at the theme’s single.php file, and see if you are accidentally printing out content such as another template or the header twice.

A simple debug is to temporarily switch themes and see if the issue remains. If the issue is gone, then we know that the problem is caused by the Atra theme (likely some custom work that was done to it). But if the problem remains, then the culprit is likely another plugin.

To see if the problem is fixed, go to one of your posts and view source. From there, just do a CRTL+F to search and look for <head>. If more than one result is found, we still have an issue.

**NOTE: If you see &#60;, that is the HTML character code for <. Sorry about the formatting.

16 November 2023 — 12:42 support admin - Dylan

Thank you so very much for your feedback and super helpful info! I passed this along to my designer and they were able to identify the issue and start working on a fix. Cheers to you!

16 November 2023 — 16:31 thread author - Johnny

If you are enjoying HD Quiz please leave a review here on the official WordPress.org page. HD Quiz is developed by me, just some dude, and is supported and available for free. It may seem dumb, but truly nothing makes me happier than knowing that people are using and loving HD Quiz and my hard work.

This thread has either been marked as complete or has been automatically closed due to inactivity.