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 36

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
Highlighted
Tourist
36 0 3

Yes,

 

.quantity-button {
  display: inline-flex;
  width: 45%;
0 Likes
Highlighted
Shopify Partner
36 7 36

This is an accepted solution.

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
Highlighted
Tourist
36 0 3

Thank you very much it works perfectly ..

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

1 Like
Highlighted
Shopify Partner
36 7 36

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