Seems like you already solve it.
Topic summary
A user seeks to reduce excessive white space above and below content on their Shopify store (kidkartz.com). Screenshots show large gaps in the primary/gradient background areas on both the homepage and product pages.
Solution Provided:
A community member suggests adding CSS code to the theme’s stylesheet (base.css, style.css, or theme.css):
@media screen and (max-width: 750px) {
.background-secondary .featured-product {
padding: 2.5rem !important;
}
}
Current Status:
- The initial spacing issue was successfully resolved
- A new problem emerged: unnecessary space below an image (shown in follow-up screenshot)
- The user partially solved one spacing issue but still struggles with additional white space on the product page
- The discussion remains ongoing with the user requesting further guidance on which code to modify