A Shopify store owner using the Dawn theme seeks to reduce excessive spacing between product images and price numbers on mobile devices for their homepage best-sellers section.
Proposed Solutions:
Two app representatives (PageFly and GemPages) provided CSS-based fixes:
PageFly’s approach: Add media query code to the base.css file targeting elements with classes .card__heading and .price, setting margins to 0 !important for screens max-width 767px
GemPages’ method: Insert CSS code above the </body> tag in the theme’s liquid file
Both solutions involve accessing Online Store → Theme → Edit code and adding custom CSS to adjust margin spacing specifically for mobile viewports. The issue appears cosmetic and limited to the mobile layout only.
Hello,
I am presenting my best-selling products on the front page of my store, but unfortunately, the spacing between the category products and the numbers below, is too large (mobile version).
Please view picture attached. I wish for the numbers to be just a little closer to the products presented (mobile only). Is somebody able to provide me with a corresponding code ?
This is my store url: justincase-de.com
I appreciate all help, but please do not contact me on Instagram.
Kind regards.
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
.card__heading {
margin-bottom: 0 !important;
}
.price {
margin-top: 0 !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
Hi @JustInCase-de ,
Glad to support you today.
You can check out my suggestion below to get your concern resolved.
Hope you find my answer helpful!
Kind & Best regards,
GemPages Support Team.