Re: Quantity button is to large on mobile devices - Dawn theme

Solved

Quantity button is to large on mobile devices - Dawn theme

Dekanten
Navigator
326 1 117

Hi

 

The quantity button must be smaller to fit the thrashcan icon aligned beside it. I want the thrashcan icon on the right side of the button. Can that be fixed somehow? Thank you all again. 😎

 

www.dekanten.no

 

See attached image: 

 

Skjermbilde 2024-09-18 kl. 11.05.52.png

Accepted Solutions (3)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@Dekanten, Hi again 😀

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
@media only screen and (max-width: 749px) {
    .quantity {
        width: 70% !important;
    }
}
</style>

 

 

Result: 

BSSCommerceB2B_0-1726650980723.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

sahilsharma9515
Shopify Partner
1257 163 241

This is an accepted solution.

Hi @Dekanten Please add the below code:

 

<style>
@media only screen and (max-width: 749px) { .quantity{
    width: 50% !important;
}
</style>

 

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above </body> tag

Result:

sahilsharma9515_0-1726651096329.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

Hello @Dekanten 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 749px) {
    .cart__items .quantity {
       width: 63% !important;
    }
}
</style>

Tech_Coding_0-1726651117973.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 5 (5)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@Dekanten, Hi again 😀

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
@media only screen and (max-width: 749px) {
    .quantity {
        width: 70% !important;
    }
}
</style>

 

 

Result: 

BSSCommerceB2B_0-1726650980723.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dekanten
Navigator
326 1 117

Hello my dear friend and glad to see this works like a charm again, many big huge thanks for the fix for me. Always a pleasure to get your help guys, really glad it worked well too. THANKS AGAIN 😀

sahilsharma9515
Shopify Partner
1257 163 241

This is an accepted solution.

Hi @Dekanten Please add the below code:

 

<style>
@media only screen and (max-width: 749px) { .quantity{
    width: 50% !important;
}
</style>

 

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above </body> tag

Result:

sahilsharma9515_0-1726651096329.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

Hello @Dekanten 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (max-width: 749px) {
    .cart__items .quantity {
       width: 63% !important;
    }
}
</style>

Tech_Coding_0-1726651117973.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
Dekanten
Navigator
326 1 117

Hi and thank you so much for your support and i got three solutions at once so i will for sure accept your solutions and give a like to all of them. Huge thanks gentlemen. 😀