Shopping Cart Quantity Input and Append - Keep Buttons Together

[Cary]

The shopping cart (shopping_cart.php) buttons to update the quantity or delete item were constantly flowing under to the next line whenever the screen size was reduced. Especially on mobile devices. From a visual aspect it drove me crazy. So I believe I found the solution to lock them together using the user.css file (/templates/override/static/user.css).
Simply add

Code: Select all

.input-group {flex-wrap: nowrap}

to the css file which overrides the default input-group and locks the qty, update and remove fields together.

The !important property doesn't seem to be required so don't add it unless needed. My understanding is that you don't use that property unless the override isn't affected. This might impact another area that uses the .input-group but I didn't find any after a quick search.

Hope this helps you if needed/wanted.
-Cary

[Kofod95]

Thank you for sharing this.
I believe you could add

Code: Select all

.sc-product-listing

to make sure it only affects the shopping cart.
I'm not at my PC, so I can't check, but most modules have a div with a class specific to that module to allow individual styling of content

//Daniel

[ReneH4]

This has bothered me from the beginning of Phoenix too (no offence to the developers).

I will definetly go and try this! Thanks for sharing!