Make font bigger add to cart button turbo portland theme

[dyarovink]

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.

 

[AvadaCommerce · Accepted solution]

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.

[Halothemes]

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.

[dyarovink]

Hi thanks for your reply.

Password: kaasje123

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

[AvadaCommerce · Accepted solution]

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.

[dyarovink]

Thanks a lot! It worked 🙂

[Halothemes · Accepted solution]

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.

[dyarovink]

Thanks a lot! It worked 🙂