add to cart button sizing issue

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A Shopify store owner reported inconsistent sizing between “Add to Cart” buttons, with one appearing smaller than the other, creating layout problems.

Initial Solution:
Multiple developers provided CSS fixes targeting the soldoutButton class, adding properties like min-height: 44px and flexbox alignment. The code should be added to either component-card.css, base.css, or within <style> tags in theme.liquid.

Follow-up Request:
After confirming the button fix worked, the user requested help increasing the item count text size on mobile devices.

Mobile Fix Provided:
A media query solution was shared to increase font size for .card-meta .meta>span elements on screens under 768px width, to be added to base.css.

Status: The original button sizing issue appears resolved. The mobile text size solution has been provided but not yet confirmed as implemented or tested by the user.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

One of my add ti cart button is small and other is big cauing a very bad layout issue , please help me fix this

https://t999e0rwktxgu628-71576191201.shopifypreview.com

IMG_6633.png
IMG_6633.png1290×2796 200 KB

2

Hi @Shahil1 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

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

button.soldoutButton {
    position: relative !important;
    min-height: 44px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

Screenshot_12.png
Screenshot_12.png371×799 121 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

3

Hello @Shahil1 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
button.is-primary.soldoutButton {
    min-height: 44px !important;
}

ZestardTech_0-1741331311099.png
ZestardTech_0-1741331311099.png717×476 92.1 KB

Let me know if you need further assistance!

4 
button.soldoutButton {
    position: relative !important;
    min-height: 44px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

5

this works can you also help me increase the size of this items count in mobile

Screenshot 2025-03-07 134353.png
Screenshot 2025-03-07 134353.png318×120 20.5 KB

6

Hi @Shahil1

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

button.is-primary.soldoutButton {
    min-height: 44px !important;
}

Best,

Liz

7

Hello @Shahil1 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:768px){
.card-meta .meta>span{
font-size:1rem !important;
}
}

ZestardTech_0-1741341061650.png
ZestardTech_0-1741341061650.png324×618 156 KB

Let me know if you need further assistance!