How to Increase the Font Size on the Add to Cart Button - Dawn Theme

Technical Q&A
,
1

Hi there -

So I found a bit of code in another thread on how to make the button green and then another code to increase the height/padding on the Add to Cart button on the Dawn theme - which is great! It is a wide as it can be on mobile and nice & tall now.

Looking for this answer: But I want to increase the size of the font in the button.

I’ve used this code to turn the button green - in the base.css file, under Assets:

product-form [type=“submit”] {
color: #FFFFFF !important;
background-color: #58b42d !important;
font-weight: bolder !important;
}

I’ve used this code to make the Add to Cart button taller/more padded - in the base.css file, under Assets:

.product-form__submit{ padding:
2rem

3rem
;}

I went ahead and made the text all caps in the languages section but looking to adjust the actual font size

Thanks in advance for your help!

2

Hi @ginamenduni

You can add the following code: “font-size: 16px;”. Also, you can increase or decrease the number “16” to customize the font size as desired.

product-form [type="submit"] {
    color: #FFFFFF !important;
    background-color: #58b42d !important;
    font-weight: bolder !important;
    font-size: 16px;
}

Let me know if it works for you by giving a like or marking it as a solution.

3

Hi @ginamenduni ,

Please add code:

product-form [type="submit"] {
    color: #FFFFFF !important;
    background-color: #58b42d !important;
    font-weight: bolder !important;
    font-size: 2rem;
    padding: 2rem 3rem;
}

You can change the font size yourself here:

Screenshot.png
Screenshot.png802×508 7.21 KB

Hope it helps!