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

Solved

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

LauraOO
Explorer
67 0 13

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

 

Screenshot 2023-07-04 at 09.19.19.png

Accepted Solution (1)

Typostore
Shopify Partner
117 11 13

This is an 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

- I'm dev shopify. | Skype : hoang.nguyenit92 | Email: typostores@gmail.com
- Is my reply helpful? Click Like to let me know!
- If you got your answer? Mark it as an Accepted Solution

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
4391 1134 1390

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>

Moeed_0-1688456339832.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
LauraOO
Explorer
67 0 13

Hey Mooed, thanks for the quick response.

 

Hmm the code kinda removes the input field.

 

Screenshot 2023-07-04 at 09.45.10.png

Moeed
Shopify Partner
4391 1134 1390

Hey @LauraOO 

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Typostore
Shopify Partner
117 11 13

This is an 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

- I'm dev shopify. | Skype : hoang.nguyenit92 | Email: typostores@gmail.com
- Is my reply helpful? Click Like to let me know!
- If you got your answer? Mark it as an Accepted Solution
LauraOO
Explorer
67 0 13

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

Typostore
Shopify Partner
117 11 13

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

- I'm dev shopify. | Skype : hoang.nguyenit92 | Email: typostores@gmail.com
- Is my reply helpful? Click Like to let me know!
- If you got your answer? Mark it as an Accepted Solution