Return to previous page

+ and – buttons are quite small on mobile devices

This topic has 8 replies, 3 voices, and was last updated 2 years, 7 months ago ago by Olga Barlow

Kevin

Participant

February 4, 2022 at 10:06

Hi, the – and + buttons to increase and decrease the quantities on the mobile devices are quite small especially in the shopping cart page. Therefore, usually by trying to press either on – or + it goes to the input quantity text field instead.

Is this normal?

#316148 Copied Theme version: 8.1

7 Answers

Rose Tyler

Support staff

February 4, 2022 at 13:28

Hello,

Check how it works on our demo – https://xstore.8theme.com/elementor/cart/

Regards

#316178 Copied

Kevin

Participant

February 5, 2022 at 00:59

You can see what I mean here from your demo https://ibb.co/ynQSVwJ in a desktop it is fine to use the mouse cursor but on a phone, it is impossible to press either – or + as it will always hit on the input text box

#316240 Copied

Rose Tyler

Support staff

February 5, 2022 at 13:52

What device and browser do you use? Could you record a video of the problem?

Regards

#316286 Copied

Kevin

Participant

February 5, 2022 at 13:56

Please see the video attached https://we.tl/t-gdoPVHV16p

#316287 Copied

Olga Barlow

Support staff

February 7, 2022 at 17:20

Hello,

What mobile device do you use?

Regards

#316413 Copied

Kevin

Participant

February 8, 2022 at 01:11

Hello, I have tried on both iPhone X, iPhone XS Max, iPhone 13 Pro Max…and some android devices

#316471 Copied
Olga Barlow

Support staff

February 8, 2022 at 14:25
Hello,

Add the below code to Theme Options > Custom CSS to increase the size of the q-ty on the cart page
```
@media only screen and (max-width: 480px) {
    table.cart .quantity {
        height: 55px;
    }
   table.cart .product-quantity .quantity input[type=number] {
       min-width: 60px;
   }
   table.cart  .product-quantity span.minus, table.cart  .product-quantity span.plus {
       width: 30px;
   }
}
```
If iPhone detects the input number then it places the cursor to enter the number, so we can’t change that behavior.

Regards
#316529 Copied
Tagged: best selling, design, mobile, responsive, themes, usability, woocommerce
Viewing 8 results - 1 through 8 (of 8 total)