Change font size for "add to cart" quick add for mobile only - Dawn 14.0.0

[FloridaGlow]

Hey! On mobile, when viewing a collection, the add to cart quick add button font size is too big, and it makes "add to cart" display on two lines. This can be seen in the picture I attached. I am on Dawn 14.0.0, and only want to change it for mobile viewing, thanks!

[Made4uo-Ribe]

Hi @FloridaGlow 

Would you mind to share your store URL? Thanks!

[FloridaGlow]

@Made4uo-Ribe https://f81w8t71pl7ue67l-57075630262.shopifypreview.com

[Made4uo-Ribe]

Thanks, check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 419px){
.quick-add__submit {
    font-size: 1.2rem;
}
}

And Save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[FloridaGlow]

@Made4uo-Ribe it didn't work, I tried putting it at the bottom of base.css and even at the top, no changes happened, I tried messing around the size like 0.1rem and it stayed exactly the same. When there is a compare at price, it still goes to two lines

[Made4uo-Ribe · Accepted solution]

Try to add !important like this. 

@media only screen and (max-width: 419px){
.quick-add__submit {
    font-size: 1.2rem !important;
}
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[FloridaGlow]

@Made4uo-Ribe added it to top of base.css and it worked perfectly, thanks!