A Shopify store owner encountered excessive white space below product images on both desktop and mobile views, which wasn’t present previously.
Root Cause:
The issue stemmed from a CSS selector forcing image containers to use 100% height instead of auto-adjusting based on content.
Solution Provided:
A CSS fix was shared to be added to the layouts/theme.liquid file before the closing </body> tag. The code targets product pages specifically using conditional template logic and adjusts the height property to auto.
Extended Issue:
The same spacing problem appeared on the blog collection page. An updated code snippet was provided that handles both product and blog pages simultaneously.
Outcome:
Both fixes successfully resolved the white space issues. The solution included before/after screenshots demonstrating the corrected layout on desktop and mobile devices.
Hi, I have a large white space below the selected product photo on desktop and mobile view and the other photos on the product page (see screenshot below). I have seen other discussions about removing white spaces on collection pages and homepages but this is the product page itself.
There didn’t used to be a large white space under the current selected photo and the other available photos for this product. I need to remove this gap. Please can someone advise?
Hey @chrismurphy534 ,
The extra space that you are seeing right now is because a selector containing the images is taking 100% of height rather than auto adjusting the height based on the content.
To fix these please add the below code at the bottom of the layouts/theme.liquid file just before the closing body () tag and this will fix the issue.
{% if template contains 'product' %}
{% endif %}
Once you have successfully added the code, your product page would look like something as shown in the screenshots below with the extra spacing removed:
For desktop:
For mobile:
I hope this helps!
If my response helped you, please consider giving it a like ( 
) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
Regards,
Abhishek from Swym
That worked, thank you!
I have the same problem on our blog collection page (screenshot below) would you be able to help with the code fix for this as well please?
Hey @chrismurphy534
Yeah, just replace the code that I shared earlier with the code below. This should handle scenarios for both the product and the blog pages.
Once you have successfully replaced the code, your blog page would look like something as shown in the screenshots below with the extra spacing removed:
For desktop:
For Mobile:
I hope this helps!
If my response helped you, please consider giving it a like ( ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
Regards,
Abhishek from Swym
Great that worked, thanks again!
