Make Popup link smaller?

[samueljoonjung]

How do you make the size of the Popup link smaller. It takes up too much space on the product page. Please help asap. URL is www.whoglobal.shop.

[topnewyork]

Hi @samueljoonjung , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Made4uo-Ribe]

Hi @samueljoonjung

Please, share your store URL. Thanks!

[B2Bridge]

Hi @samueljoonjung , can you share us your store url?

[samueljoonjung]

I just did. Please check

[topnewyork]

@samueljoonjung

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Made4uo-Ribe]

Thanks for te info, check 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:

@media screen and (min-width: 750px) {
    .product-popup-modal[open] .product-popup-modal__content {
        width: 50%;
        height:50%;
    }
}

• And Save.

• Result:

• 

  Im not sure how small you want it to be, but the default size are width: 70%, height: 80%. You can change it base in your preference, but please not to small. This changes is only for tablet, and dekstop not include the mobile.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[B2Bridge]

Hi @samueljoonjung , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code

Step 2: Find section-main-product.css file

Step 3: Paste this code at the bottom of the file

.product-popup-modal__opener, .product__inventory {
    margin: 0 !important;
}

[samueljoonjung]

Thanks but I am talking about the button itself. Not what it opens. The button/link “Size Guide” is too large. I want it smaller.

[topnewyork]

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[samueljoonjung]

That worked great but now the space above and below the “Size Guide” is too large. How can i adjust that padding

[topnewyork]

@samueljoonjung check this code

[Made4uo-Ribe]

oh, the font you mean. Same instruction.

button#ProductPopup-popup_TGKL9w {
    font-size: 1rem !important;
}

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

And Save.

Result:

I also lesser some space.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[samueljoonjung]

This didn’t work. I pasted right after the prior code you gave me. Is that what I was supposed to do?

[topnewyork]

@samueljoonjung it’s working fine here, try again please

use this code instead of above code..

.product__info-container {
margin: 2px;

}
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[samueljoonjung]

This is the code I have but it didn’t do anything