How to decrease the spacing at the product page to the header? As shown on the photo
Topic summary
A user seeks to reduce excessive spacing between the product page header and content on their Shopify store.
Initial Solution Attempts:
- Another user provides CSS code targeting
.page-content--productwithpadding-top: 15px !important;to be added to base.css, theme.css, or the Custom CSS tab in theme settings. - The original poster struggles to implement it, discovering Shopify had removed a hyphen from the code when copying.
- After clarification that the correct selector is
.page-content--product(with double hyphens), the code works when added to theme.css.
Refined Approach:
- A third contributor recommends using a media query
@media (min-width: 769px)to preserve zero top padding on mobile devices. - This responsive solution is suggested for the Custom CSS section setting rather than editing theme files directly.
Key Takeaway:
- Adding CSS to theme settings’ Custom CSS is preferred over editing stylesheet assets, as it maintains theme updateability and avoids losing customizations during theme updates.
- The discussion concludes with the original poster requesting additional custom development work for a badges section displaying “Easy 30-Day Returns” and “Fast Shipping.”
Hello @Jim3 ,
I hope you are well!
Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css
Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
.page-content–product {
padding-top: 15px !important;
}
This will remove the gap from the top:
i tried to added on both places - it does not work
Sorry, Shopify removed one -. Please copy and paste the code like below screenshot and it will work.
I see your screenshot, but again I am telling you that - It doesnt work for me.
Can you please share the screenshot how you pasted it? It might be the case that you have pasted at wrong place.
Yes! One - before product text is missing it will be --product which I sent you in the screenshot. Please check the below code
.page-content--product {
padding-top: 15px !important;
}
1 Like
I’d rather recommend this code to paste into “Custom CSS” setting of this section:
@media (min-width: 769px) {
.page-content--product {
padding-top: 15px;
}
}
This will keep zero top padding on mobile.
1 Like
Okay, that works ! I added in the theme.css and now it works for every product 
Thank you !
So I have one more complicated and interesting task. Do you think you can do it? Maybe I can write you by email or here DM ?
Thank you so much @tim_1 This worked but I had to give the solution to the other person since his way change the problem at every product and not only at this one. Thank you so much! But I have one more task which maybe you can help me with?
Yeah! Sure, please email me at ankit@aitrillion.com.
I sended you an email, thanks !
So you have different product templates? You can use the code in the “Theme settings”=> “Custom CSS”.
I try to avoid editing theme code in my recommendations to avoid breaking theme updateability.
But yes, can put into stylesheet asset.
2 Likes
Aww thats very intresting. I never heard about that this changes might stop the theme updatability. Thank you! In same time as I know adding it in the stylesheet asset is good for keeping the website fast? Or also adding it in the Custom CSS is still keeping the website fast enough?
Custom CSS goes directly into your HTML. So it’s even faster than adding to a stylesheet asset.
Also, “Custom CSS” sectionsetting is processed by shopify to make it only apply to this particular section, which is beneficial to avoid side-effects elsewhere.
At the same time it raises priority of these rules, so benefits
When your theme updates to a newer version, Shopify will strip all the code edits you’ve done, so you’d need to re-apply them.
“Custom CSS”, and “Custom liquid”, being theme settings will persist.
1 Like
Thank you!
Ar u able to build something for me? Is a small window section where should be written “Easy 30-Day Returns” and “Fast Shipping” in same line in the window with badges in front each?