How can I fix the mobile view of my 'add to cart' button?

[LauraOO]

Hello everyone, 

I recently got my add to cart button coded so you can add quantity next to the add to cart button.

But when you are viewing it on mobile the "Læg i kurv" is in 2 lines. I would prefer it would be on the same line. That would make it look better. 

So instead of 

"Læg i

kurv'"

It should be "Læg i kurv"

Can anyone help me fix this on mobile?

Læg i kurv is danish for Add to cart btw.

Preview link: https://b8zm0t0p8ig16m36-62347510003.shopifypreview.com

[Moeed]

Hey @LauraOO 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media only screen and (max-width: 600px) {
.product-action button {
    white-space: nowrap;
    font-size: 10px;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[LauraOO]

Hey Mooed, thanks for the quick response.

Hmm the code kinda removes the input field.

[Moeed]

Hey @LauraOO 

Set the font-size to 8px then it should look good

[Typostore · Accepted solution]

Hello @LauraOO ,

@media only screen and (max-width: 600px){
.product-action button {
padding: 15px 12px;
}
}

You can put code this at bottom file custom.css

it will work for you. if not pls let me know, I'll update for you

thank you

[LauraOO]

Thanks typostore! Worked like a charm, nice to also have it in the same CSS file 🙂

[Typostore]

yes, if you need me help anything, pls let me know, I'll help you