shorten the button "add to cart"

Solved
Tourist
36 0 3

Hello everyone,

 

I managed to shorten the button "add to cart" .. it's good for the office but for the mobile phone is a problem because we see half the text "Add to cart". .

 

Do you have a solution?

 

Thank you

0 Likes
Highlighted
Shopify Partner
36 7 34

Can you show the css you used to shorten the button?

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
0 Likes
Tourist
36 0 3

Yes,

 

.quantity-button {
  display: inline-flex;
  width: 45%;
0 Likes

Success.

Shopify Partner
36 7 34

So you can add css that only targets mobile and make the width for this larger. Let's try this code below for example and see if it works.

 

@media screen and (max-width:767px) {

  .quantity-button {
    display: inline-flex;
    width: 90%;
   }

}

Any CSS you put in the @media brackets will only be executed on devices under 767px wide.

You can set this width on mobile to any value you would like.

 

Thanks,

Ken.

 

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
0 Likes
Tourist
36 0 3

Thank you very much it works perfectly ..

What are the mobile phones that have the maximum 767px width?

1 Like
Shopify Partner
36 7 34

It encompass's most general phone sizes. I can't make a list as there is an endless amount of phones but anything that is not bordering tablet is under 767px.

Thanks,

Ken.

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
0 Likes