URGENT: Button size on Product Page

carolbrodie
Tourist
5 0 1

I have been trying to change the size of the colorful buttons on the description of this product. But no matter the size I add in width and height on the button html description of the product, the button stays the same size. 

All of this are returning the same size buttons. 

<a href="https://www.carolbrodie.com/products/athena-blue-eye-earring"><button style="border: 1px solid #3499BC; background-color: #3499bc; color: white; height: 3px; width: 3px; text-align: center; border-radius: 4px; font-family: Verdana; font-size: 8px;"></button></a>

<a href="https://www.carolbrodie.com/products/athena-white-eye-earring"><button style="border: 1px solid #CECECE; background-color: #ffffff; color: black; height: 1px; width: 1px; border-radius: 4px; font-family: Verdana; font-size: 8px;"></button></a>

<a href="https://www.carolbrodie.com/products/athena-green-eye-earring"><button style="border: 1px solid #40B086; background-color: #40b086; color: white; text-align: center; height: 0.5px; width: 0.5px; border-radius: 4px;"></button></a>

A Shopify expert told me to add a code (https://community.shopify.com/c/Shopify-Design/Button-size-on-Product-Page/m-p/1247295#M323584) but it did not work and they never replied. Please can someone help?

Replies 3 (3)

Bunty
Shopify Partner
133 39 82

First thing is that you should not have inline CSS on those buttons, but that's a separate topic.

The reason you are unable to set new width/height is because of this

.product_section .description>div>a button {
    width: 2px!important;
    height: 2px!important;
}

 

with that removed, new dimensions can be set, as follows

carolbrodie.PNG

 

Hope this helps

 

carolbrodie
Tourist
5 0 1

@Bunty I have removed it but it still does not change. Can you take a look?

Bunty
Shopify Partner
133 39 82

I confirm that you have removed what I highlighted, but you haven't changed the height width of the button, they are still 2px

<button style="border: 1px solid #3499BC;background-color: #3499bc;color: white;height: 2px;width: 2px;text-align: center;border-radius: 4px;font-family: Verdana;font-size: 8px;"></button>

Change the height and width here to the size you want. In my previous screenshot, I had shown what 100px would look like