Product Pages Blank Space Issue (Dawn 9.0 Theme)

[chimneycricket]

Our online store (https://www.chimneycricket.com) made with the Dawn 9.0 theme has been having some issues with the Product Pages (ex. https://chimneycricket.com/products/summerset-sizzler-26-built-in-grill) showing a large block of white space under the footer. Have tried reaching out to support and tried to change the code around but no luck. Any input would be very much appreciated! Thank you in advance.

[makkaomakka]

Hi @chimneycricket ,

I reviewed the site and found that there are bunch of SVGs thats taking up the space.

I noticed some issues on your theme which is not possible to explain via comments. Some of the issue is shown in the below screenshots[i.e Issues with DOM elements].

Untill you debug this completly, you can add bellow CSS to hide those white spaces

<style>
svg[height="100%"] {
display: none!important;
}
</style>

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

Step 2: Search for "theme.liquid"

Step 3: Add the CSS above "</head>"

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Mangit

[Made4uo-Ribe · Accepted solution]

Hi @chimneycricket 

Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

body > svg {
    display: none !important;
}

• And Save. 
• Result:
  

[chimneycricket]

Thank you SO much! This worked and saved us so much trouble. We really appreciate your time.