URL: https://wjvxfbd335wa4srf-17240367.shopifypreview.com
How do I reduce the white space between the collection grid and the footer to approx 5px?
Topic summary
Goal: Reduce the large white space between the collection grid and the footer in a Shopify Dawn theme to about 5px.
Context: The requester shared a preview URL and a screenshot highlighting the gap. The image is central to understanding the spacing issue.
Latest guidance: Edit the theme’s CSS (base.css) and adjust the padding on the collection list grid:
- Selector: ul.collection-list.grid
- Current rule: padding-bottom: 36px;
- Action: Lower this value (e.g., to 5px) to shrink the gap.
Notes:
- CSS (Cascading Style Sheets) controls styling; padding-bottom sets internal space below an element’s content, affecting the visible gap before the footer.
- Ensure the selector matches exactly; if changes don’t apply, clear cache or check for overriding CSS.
Status: A clear fix was proposed. No confirmation from the requester yet, so resolution is pending after applying and testing the CSS change.
In your theme files, look for “base.css”
Here you will find the following CSS:
ul.collection-list.grid {
padding-bottom: 36px;
}
You can adjust this value to fit your needs!
1 Like