Hello, can someone please help me fix this code?
The product tiles are overlapping the next section. It is only happening on “Collection” pages, not on the homepage. My website is www.checkoutfirst.com and the page it is happening on is https://checkoutfirst.com/collections/mens
Thanks
Products at the bottom of the "Collection" page are overlapping the newsletter section (debut theme)
Topic summary
A user reported product tiles overlapping the newsletter section on collection pages (not homepage) in the Debut theme. An image was provided showing the visual overlap issue.
Solutions Offered:
Two CSS fixes were proposed to resolve the spacing problem:
- Add margin-top to the newsletter section:
div#shopify-section-newsletter-pro-1643767605 {
margin-top: 35px !important;
}
- Remove bottom margin from the product grid:
.main-content .shopify-section ul.grid.grid--uniform.grid--view-items {
margin-bottom: 0;
}
Implementation:
Both solutions require adding code to the bottom of the theme.css file via: Online Store → Themes → Edit Code → Assets → theme.css
Status:
A follow-up question appeared from another user experiencing a similar collection page display issue at the bottom, suggesting the problem may affect multiple stores. The original issue resolution was not confirmed.
1 Like
@checkoutfirst
Add this code in the bottom of the theme.css file.
div#shopify-section-newsletter-pro-1643767605 {
margin-top: 35px !important;
}
if you don’t know where to put code. follow this.
- Navigate to Online Store-> Theme->Edit code
- Asset->/theme.css ->paste the Above code at the bottom of the file.
- Save it.
@checkoutfirst
if helpful , like our Solution and let me know if you need any more help,
Thank you.
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >theme.css and paste this at the bottom of the file:
.main-content .shopify-section ul.grid.grid--uniform.grid--view-items {
margin-bottom: 0;
}
