hello, i want to reduce the white gap between my ‘add to cart’, ‘pop up link’ (size guide) and ‘quantity’ as there is a big white gap:
my website is www.antico-abito.com , theme is dawn , password is chasha
Topic summary
A user seeks to reduce excessive white space between the ‘Add to Cart’ button, a pop-up size guide link, and quantity selector on their product page (Dawn theme).
Solution Provided:
A community member offers CSS modifications to assets/section-main-product.css:
- Split and adjust margin values for
.product__info-containerelements - Reduce general spacing by changing
.product__info-container>*+*margin from 1.5rem to 0.25rem
Current Issue:
The CSS changes successfully reduce spacing but affect all elements in the product info container, including the price. The user requests a more targeted solution that only impacts the pop-up link spacing while leaving other elements (like price) unchanged.
Status: Ongoing - awaiting a refined CSS solution that selectively targets only the pop-up link element.
Hi @ads18922
For that, you need to make two changes in assets/section-main-product.css.
First, find
.product__info-container .product-form,.product__info-container .product__description,.product__info-container .icon-with-text {
margin: 2.5rem 0
}
and split that code and replace it with 2 rules:
.product__info-container .icon-with-text {
margin: 0.5rem 0
}
.product__info-container .product-form,.product__info-container .product__description {
margin: 1rem 0 2.5rem;
}
adjust values if needed.
The second one is for most of those elements, so space in general will be reduced. Find:
.product__info-container>*+* {
margin: 1.5rem 0
}
and change to
.product__info-container>*+* {
margin: 0.25rem 0;
}
Again adjust a bit for more space.
You should get something like this:
hello, this is great - there is one problem though, which is that this coding doesn’t just affect the pop up link, but it affects the price aswell - is there any way to make it just work for the pop up link?