HD Quiz

Hi BETTS,
your site has an error where it is incorrectly setting the width and height of images.

For example, it is printing your first image as 303×394. But your image is actually 300×150. This is what is causing your images to look “squished”. HD Quiz does not set the width or height, all HD Quiz does is grab the image -> your site does the sizing.

You’ll want to track down the reason your site is printing out the incorrect sizes, but for now, adding the following CSS to your site should “fix” it.

.hdq_featured_image {width: 100%}.

That will force the images to expand the full width of the question. On your provided quiz, this will make the images very tall, but at least they will be the correct aspect ratio.

When logged into your site, if you go to Appearance => Customize => Additional CSS, you can paste in the above CSS there. Just remember to clear your site cache after!

I added CSS to the site and could not resolve the issue, is there a new solution?

I don’t see the CSS on your site.

Assuming you correctly added the CSS to your theme, please make sure you clear your site cache so that your cache plugin can rebuild your CSS. You are using W3 Total cache

I have added the CSS to the theme correctly and cleared the site cache, but there is no change in the images.

Now that the cache is cleared, I can see the code added to the page. It looks like where the code is loading on your site requires us to load the style in high priority.

Luckily, this is easy to do by modifying the code to add !important to it.

So the final CSS will be: .hdq_featured_image {width: 100% !important}

We were able to resolve the issue. Thank you for your long time commitment to resolving the issue.