Make font bigger add to cart button turbo portland theme

Store Design
1

Hi there.

I like to make my font bigger on the add to cart button. On desktop I manage to do it by editing the theme, but on mobile it won’t get bigger, so I assume I need to change something in the code.

Also I like to make my quantity box as width as my add to cart button, but I have no idea where to find in in the css code.

I am using Turbo Portland theme.

Could someone help me?

Thanks in advance.

CC546486-84DC-47D1-AF78-6BC4A6EE0C61.jpeg
CC546486-84DC-47D1-AF78-6BC4A6EE0C61.jpeg828×1792 99.5 KB

2

Hi @dyarovink ,

Please share your store URL and password of front view.

So that I will check and let you know the exact solution here.

Best regards.

3

Hi thanks for your reply.

Password: kaasje123

link: https://mugzapper.myshopify.com/products/mugzapper

4

Hi @dyarovink ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss->paste below code at the bottom of the file:
@media (max-width: 749px) {
.purchase-details__buttons span.text {
    font-size: 20px !important;
}

.product-quantity-box {
    width: 100% !important;
}

.purchase-details__quantity input.quantity {
    width: 50% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hi @dyarovink ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → /styles.css paste code below into end of the file.
@media screen and (max-width:767px){
button.add_to_cart .text {
    font-size: 16px !important;
}
.product-quantity-box {
    width: 100% !important;
}
.product-quantity-box .quantity {
    width: 50% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

6

Thanks a lot! It worked :slightly_smiling_face:

7

Thanks a lot! It worked :slightly_smiling_face: