How to reduce padding of product page pop-up link

[kaleizlyfe]

Hi everyone! Can someone please help me? How do I remove the white space around my pop-up link and move the link upwards?

I tried the other suggestions from similar questions but none of them helped. Thank you in advance! 

[Moeed · Accepted solution]

Hey @kaleizlyfe 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-popup-modal__opener {
    margin: 0 !important;
}
.product__description.rte.quick-add-hidden {
    margin-top: 0 !important;
}
product-form.product-form {
    margin-bottom: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[kaleizlyfe]

Thank you! How do I remove the space that is left above the link?

[Moeed]

Hey @kaleizlyfe 

Keep the previous code and add this new code above </style> in the end of theme.liquid

.product__info-container>*+*:nth-child(7) {
    margin-bottom: 0 !important;
}
.product-form__submit {
    margin-bottom: 0 !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[kaleizlyfe]

Thank you so much! This worked.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Made4uo-Ribe]

Hi @kaleizlyfe 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product__info-container > div:has(.product-form) {
    margin-top: 0;
}
.product-form__input.product-form__quantity {
    margin-bottom: 0;
}

• And Save.
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[kaleizlyfe]

Thank you so much! This also ended up working! Do you have any suggestions how to remove the padding under my variant picker? I moved the pop-up but now I have the gap again 😞