I am looking to reduce the spacing between the sections of the product information, on the product page.
Underneath the title and underneath the description.
Thanks for any help
Theme is taste
Topic summary
A user seeks to reduce vertical spacing on their product page, specifically between the product title, description, and other information sections. The text appears reversed/mirrored but indicates they’re using a theme and need CSS adjustments.
Proposed Solutions:
- Multiple responders suggest adding custom CSS code to the
base.cssfile via the theme editor - The code targets
.product__titleand.product-info__containerelements with margin adjustments set to0 - Media queries are included for responsive behavior at specific breakpoints (540px, 768px)
Implementation Steps:
- Navigate to Online Store → Themes → Edit Code
- Open Assets → base.css
- Paste the provided CSS at the bottom of the file
Additional Request:
Another user joins asking for similar help with padding reduction on their product page, noting that adjusting sliders in the product information settings hasn’t worked. They provide their store URL for specific assistance.
Hi @jay113
You can try this code
- Go to Online Store-> Theme->Edit code
- Asset-> base.css ->paste the below code at the bottom of the file.
@media only screen and (max-width: 768px){
.product__title{
margin-bottom: 0;
}
.product__info-container > div.no-js-hidden {
margin-top: 0;
}
}
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hello @jay113 ,
You can follow the steps below to reduce the spacing between the product title and the information.
- Go to Shopify Admin Dashboard and click on Online Store → Themes.
- Click on the Actions button → select Edit Code.
- In the left-hand sidebar, navigate to the Assets folder and click to open the base.css file.
- Scroll to the bottom of the file and add the following code:
@media (max-width: 540px) {
.product__title {
margin-block-end: 0;
}
.product__title + * {
margin-block-start: 0;
}
}
Hope it helps. Let us know if you have any further queries.
Regards,
CedCommerce
Hi! Can you help me reduce the padding on my product page as well? I haven’t had any success doing it by adjusting any sliders via the product information page. https://shopspikesandseams.com/products/palm-cheetah-custom-satin-pajamas?_pos=3&_sid=7f9e51795&_ss=r
