Shopify themes, liquid, logos, and UX
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?
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
Hope this helps
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024