Hi Guys,
I would like to reduce the gap between section heading and images, and between images and text containers.
Thank you
Topic summary
A user seeks to reduce spacing between section headings, images, and text containers on their store.
Initial Solutions Proposed:
- Trim whitespace from images before uploading
- Add custom CSS code to theme.scss targeting specific section IDs to reduce padding and margins
Implementation Issues:
- User reports CSS code placement confusion and ineffectiveness
- After applying fixes, significant gaps persist between section headers and images
- Mobile view spacing also requires attention
Current Status:
The issue remains unresolved. While support confirms the CSS code works on their end, they attribute remaining gaps to excessive whitespace in the original images. The user has edited images but continues experiencing large gaps, suggesting either incomplete image optimization or additional CSS adjustments needed. The conversation appears ongoing with no final resolution reached.
Hello @Alliance
It’s GemPages support team and glad to support you today.
The gap is because the image has too much space, you can remove it before uploading
In addition, you can also reduce the spacing a bit with the CSS code below
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
Where to paste that code. I pasted in theme sccs but it didn’t work out.
with theme.scss use the following code:
#shopify-section-d42c2318-85f9-417f-b470-04c86bc4ffdd h2{
margin-bottom:0
}
#shopify-section-1585004795688{
padding-top: 0px;
margin-top: 0px;
}
Already did that. Didn’t worked.
Please consider mobiel view too. Thank you
I checked the added CSS code worked, but the remaining gap is due to your image having a lot of white space, you should edit the image before uploading
