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

[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 </head>

<style>
@media screen and (min-width: 750px) {
    .product-popup-modal__content {
        width: 55% !important;
        padding: 0 3rem !important;
    }
.product__info-container {
    margin: 4px 0 !important;
}
}
</style>

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

[Made4uo-Ribe]

Hi @samueljoonjung 

Please, share your store URL. Thanks!

[samueljoonjung]

I just did. Please check

[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!

[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 </head>

<style>
 .product-popup-modal__button {
    font-size: 14px !important;
</style>

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

<style>
.product__info-container {
    margin: 4px 0 !important;
}
</style>

[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

[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!

[B2Bridge]

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

[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;
}