Spacing between Title, Price, Review - Dawn Theme Product Descriptions

Store Design
1

Hello - Looking to be able to change the spacing in all my components in my product page across the whole site from Mobile to Desktop.. In pixels so I can easily change them when needed. Will buy a coffee for anybody who can give me a solution. Link to product page - https://devildaves.com/products/dill-pickle-hot-sauce

Custom Line

Reviews

Product Title

Price

Variant

Desired Units

Screenshot_20241003_092354_Chrome.jpg
Screenshot_20241003_092354_Chrome.jpg1079×1923 162 KB

page 1.jpg
page 1.jpg727×674 38.2 KB

THANK YOU SO MUCH FOR ANY HELP!

2

Hello @Ryanp

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product product-info p, .product__title { margin-bottom: 0 !important; } .product__info-container > * + * { margin: 0.2rem 0 !important; } .product__info-container .product-form{ margin: 1.5rem 0 !important }

Tech_Coding_0-1727962785403.png
Tech_Coding_0-1727962785403.png1348×595 159 KB

Tech_Coding_1-1727962828760.png
Tech_Coding_1-1727962828760.png314×545 24.4 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Thank you. I would like to add a touch of space between Reviews and Product Title.. I tried adding but didnt work.. Do you have a suggestion please?

.product product-info p, .product__title {
margin-bottom: 0 !important;
margin-top: 1.8rem 0 !important

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product .product__title { margin-top: 1.8rem 0 !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

5

That didnt work unfortunately..

6

Sir or Maam - The spacing is way too compacted and I cannot change anything but the Space between First line and Reviews.. Do you know how I can add more space after the reviews?

7

Sorry I did mistake please replace above code with this

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product .product__title { margin-top: 1.8rem !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.