SINGLE COLUMN (2 ROWS on MOBILE) Quantity and Add to Cart

Hello, the theme is awesome.
Just need, please, the the input quantity goes full width on mobile (so bigger to fit the screen) and the add to cart button 1 row below full width, actually both elements are same line as it is on desktop!

This may encrease the usability because, right now, the add to cart could be a bit too small for semi-blinded or older people, while on desktop your solution is perfect.. non mobile it suffers a bit.

I tried making the minus and plus font size bigger, but this breaks the UX.

Can you help please?

Hello,

Thank you very much for choosing our theme and for contacting us.

Please add this code to the Theme Settings > Custom CSS > Global:

body .quantity input[type=button] {
    min-width:40%;
}
body .quantity {
    display: block;
}

Best Regards

Hi, that’s good, thank you.
Is possible to center it too, please?

It seems having a float:left or something like that.. something tha dont allow centering your code..

I tried even with display:flex,flex-direction:column, align-items:center,align-content:center but this didnt work..

Thanks again

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .quantity input[type=button] {
    min-width:45%;
}
body .product-image-summary .quantity {
    margin-right:0;
	display:block;
}
body .product-image-summary .single_add_to_cart_button {
    margin: 10px auto;
    display: block;
}

Please remove the code from Global and add this to Mobile.

Best Regards

[Author]

Posts