hello, i would like to reduce the gap between my product title and price on my product page as there is a big gap:
my website is www.alexandrawestbrook.com , theme is dawn
Topic summary
A user seeks to reduce excessive spacing between the product title and price on their product page (Dawn theme). An attached screenshot illustrates the current large gap.
Two CSS solutions were provided:
-
Targeted approach: Add custom CSS targeting the specific price element with
margin-top: 5pxto reduce spacing directly below the title. -
General approach: Modify the
base.cssfile to adjust margins for all child elements within the product info container usingmargin: 0.5rem 0.
Both solutions include before/after screenshots demonstrating reduced spacing. The issue remains unresolved as the original poster has not confirmed which solution worked or if the problem is fixed.
Hi @ads18922
You can reduce the space between product title & price on product page by add this custom css code:
.product__info-container #price-template--23982096220487__main {
margin-top: 5px;
}
the result will be:
Hi @ads18922
I am from Mageplaza - Shopify solution expert.
Please add the following code to the base.css file:
.product__info-wrapper .product__info-container>*+* {
margin: 0.5rem 0;
}
*Result:
Please let me know if it works as expected!
Best regards