How to make space between blocks on product page smaller

Store Design
1

Screenshot 2023-07-01 154955.jpg
Screenshot 2023-07-01 154955.jpg460Ă—793 41 KB

how do i make the spaces between each of these blocks smaller?,

any help is appreciated!

2

@axeltta , Could you please share your store URL?

And would you like to reduce the space for the mobile layout only?

3

@axeltta , Please add the below line of CSS code at the end of your base.css file.

body .product__info-container>*+*{
margin:0.5rem 0;
}
body .product__info-container .product-form{
margin:1rem 0;
}
body .product__title{
margin:0;
}

let us know if you have any doubt.

1 Like
4

yes mainly for mobile,

store url is yotoia.com

5

@axeltta , please use the steps I have mentioned in previous reply. Please check below

6

Hi @axeltta

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.product__info-container>*+*{
   margin: 8px 0 !important;
}
.product__info-container .product-form{
   margin: 16px 0 !important;
}
.product__title{
   margin: 0 !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

1 Like
7

This reduces the gap between all blocks except for the space between “Add to Cart” button and description. It also doesn’t reduce the gap between description and an other added block.

Please support and guide how to reduce spaces between above mentioned blocks.

8

After adjusting margins that suit my webstore, this one seems to work fine.

9

I have the same issue, however this code did not work for me. Pls help.