So on this page I have three custom liquid blocks towards the bottom. There is a small amount of white space between each of them but as far as I can see from the code it is not padding or margin, the div just outside the content is ever so slightly taller. Does anyone know what is causing this?
Topic summary
Issue: Small white space appeared between three Custom Liquid blocks (Shopify templating sections) on a product page, not attributable to margin or padding; the container seemed taller than the content.
Early attempts: Suggestions included deleting custom code or adding a snippet to theme.liquid, and wrapping content with a div using negative margin-top. The negative margin only clipped images and did not remove the white borders.
Root cause and fix: The extra space was caused by the line-height applied via a text-center class affecting the Custom Liquid container. Overriding/removing that line-height for the affected section resolved the spacing. The original poster confirmed the fix worked.
Artifacts: Screenshots were central to diagnosing the spacing and identifying the text-center class/line-height as the culprit. A CSS adjustment (not fully shown in the thread) was the effective remedy.
Status: Resolved for the original case. Additional participants reported similar spacing issues (e.g., space above a Custom Liquid video) and requested step-by-step instructions for adding the CSS fix, which remain unanswered in the thread.
Do you mean this space?
It is caused by custom liquid that you added to your code from the Shopify customizer.
Just delete it.
If you can’t find this custom code, simply add this code to your theme.liquid:
Hi,
You can surround the custom code with <div style="margin-top: -10px;> fix it until the images touch the edges this will solve the issue the space is the main container for the custom liquid block.
I don’t think it has anything to do with the margins because when I inspect it this there are none.
Yes its not margin or padding its the container for the custom liquid
just add at the top:
close
save and check and let me know if it work if not give me collaborator access to fix it for you
Sadly adding that to the top of the custom liquid block only clips the image inside still keeping the white borders. Also sorry I would be unable to give you collaborator access.
Please let me know if you know how to add the code, if not I will send you detailed steps to walkyou through it.
Amazing, that worked, I had the text-center isolated as something that changed this section but no clue why line-height is adding to that. Thank you!
You are welcome glad I could help.
Have a nice day.
HI Natasha,
I have a similar problem and I have tried everything to resolve this. Just need the space above my custom liquid video to be removed here. What is the best way to get rid of this on the top page?
I am having the same issue but have no idea how to add the code, could you please proved steps?