How to reduce spacing in product page of dwan theme?

Store Design
, ,

Topic summary

Goal: reduce excessive vertical spacing on the product page (Dawn theme). An image was provided to illustrate the gap.

Requests: Helpers asked for the store URL to inspect. The OP shared their storefront link (password-protected).

Solution proposed (and confirmed working):

  • In section-main-product.css, add a rule to remove extra margin on the modal opener (modal-opener with class product-popup-modal__opener) by setting margin: 0.
  • In the same file (around line ~842), reduce the .product-popup-modal__button min-height from 4.4rem to 2.4rem to tighten spacing.

Outcome: The OP confirmed the CSS changes fixed the issue. No further disputes or questions; discussion resolved.

Summarized with AI on December 27. AI used: gpt-5.
1

1000017486.jpg
1000017486.jpg1080Ă—1493 70.4 KB

How to reduce the space here in product page?

2

Hi @Luxen ,

Can you provide link to your store?

3

Hi @Luxen ,
Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

4

Hello @Luxen

Step -1

Go to this file → "section-main-product.css " and add CSS below at the very end of file and save.

modal-opener.product-popup-modal__opener {
    margin: 0;
}

Step 2

Open this file - “section-main-product.css” – go to line number “842” find the CSS below and replace “min-height: 2.4rem;”

.product-popup-modal__button {
    font-size: 1.6rem;
    padding-right: 1.3rem;
    padding-left: 0;
    min-height: 4.4rem;
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem;
    transition: text-decoration-thickness var(--duration-short) ease;
}

Please let me know if you have any question
Thanks

1 Like
5

Hi

Url: https://www.theluxen.com/

Password: Hello123

6

Thank you, it works

7

Your welcome please give a like our solutions

Thank you