How to adjust the space between this sections?

Shopify Discussion

Topic summary

A user seeks help adjusting spacing between sections on their Shopify product page, sharing a screenshot showing the layout issue.

Problem: Excessive vertical spacing between product title and review widget elements.

Solutions Provided:

  1. Rahul_dhiman’s approach (accepted solution):

    • Navigate to: Online Store → Themes → Actions → Edit Code → Assets → section-main-product.css
    • Add CSS code targeting .product__title with negative margins
    • Includes before/after screenshot showing reduced spacing

  2. ZestardTech’s alternative:

    • Edit base.css file instead
    • Provides CSS targeting the product reviews rating widget specifically
    • Adjusts margin and display properties

Resolution: The user confirmed Rahul_dhiman’s solution successfully resolved the spacing issue. Both solutions involve custom CSS modifications to theme files.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello friends, how can I adjust the space between these sections?

Bildschirmfoto 2025-01-13 um 11.15.10.png
Bildschirmfoto 2025-01-13 um 11.15.10.png2866Ă—1366 327 KB

2

@NikosBat Can you please send me your store URL?

1 Like
3

Thanks for replying Walstar, so how do I adjust that? Do I need to write a code?

4

Hello DelightCart and thanks for replying, here is the url and password:

https://www.nistore.de/products/nistore™-winterhandschuhe, nikthe

5

Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-main-product.css
add this code at the end of the file and save.

.product__title>* {
margin: -23px 0px -8px 0px !important;
}

result

138.png
138.png794Ă—512 38.4 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
6

Hello @NikosBat ,
Here are the steps to apply the necessary changes in your Shopify store:

  • In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  • Locate Asset > base.css and paste the following code at the bottom of the file:
.product__info-wrapper [id*="_product_reviews_rating_widget"] {
    margin: 20px 0;
    display: flex;
}

.product__info-wrapper [id*="_product_reviews_rating_widget"]>div {
    width: 100%;
    display: flex;
}

.product__info-wrapper [id*="_product_reviews_rating_widget"]>div .dr-relative {
    width: 100%;
    display: flex;
}
1 Like
7

Rahul_dhiman thanks for replying, that solved my problem

8

Thanks for helping me ZestardTech I appreciate it.

1 Like
9

Happy to help you…!!!