Basara's 1st answer was the correct answer: you can only fit so much stuff on a small screen. 

But I agreed with your idea that Quantity was important to display in the table. 
To me, Quantity was more important to display than Total, because the Total value is available elsewhere on the same page

Look at about line 4325 in the AC stylesheet.  You will see this:

Code: [Select]

.cart-info.product-list table tr td:nth-child(1), .cart-info.product-list table tr th:nth-child(1),
.cart-info.product-list table tr td:nth-child(3), .cart-info.product-list table tr th:nth-child(3),
.cart-info.product-list table tr td:nth-child(5), .cart-info.product-list table tr th:nth-child(5),
.invoice_products.table tr td:nth-child(2), .invoice_products.table tr th:nth-child(2),
.invoice_products.table tr td:nth-child(3), .invoice_products.table tr th:nth-child(3) {
display: none !important;
visibility: hidden !important;
}
These rules are hiding certain values on small screens.  The values to be hidden are defined by

Code: [Select]

nth-child(x).

If you change both (1) values to (2), and change both (5) values to (6), this will change which values are selected to be hidden on small screens, and your cart table will look like my cart table instead of the default AC cart table. 

Hope this helps.

I fixed this with css. 

style.css:

For the .quantitybox variable around line 1590, add:

Code: [Select]

min-width: 250px;
In the bootstrap overwrite section around line 2600, I added new variables:

Code: [Select]

form#product {
margin: 10px 10px 10px 0px;
}

#product_quantity.form-control, .alert {
width: 55px;
}

For the .mt20 variable about line 110, I changed the value from 20px to 0px. 
This last bit is more of a spacing preference than a requirement for keeping the quantity box in view on mobile screens. 

I'm pretty sure that's all I did. 

Try it and see if it works. 
If it doesn't, then maybe there is one more change I overlooked for this post, but it should be easy to figure out with CSS Inpsector.

Let me know if it works for you.

Hi.

If mobile screen too small some columns are hidden

Quote from: AVS on October 21, 2017, 10:44:02 PM

For experts and Devs, it must be a cakewalk...

Why must it?

Thanks, I see how it works now. 

For future non-techie readers: fa stands for Font Awesome and fw is a class spec that stands for fixed width. 

Font Awesome is a repository of fonts and icons.  I'm not sure if it loads with AC, or it's just out there and accessed by AC. 

If you find the tpl file source for any given AC page or element, you can edit the fa icons specified for that page or element by choosing different icon names from the Font Awesome Icon Library.   google  fontawesome.io

You can also control the size of the displayed icon by changing the fw class specification to 2x or 3x etc.  google  fontawesome.io

I think that fa icons are responsive in that they will grow as the size of their container grows.  I think.  The purpose of the fw class is to lock the size of the icon regardless of how its container size may change. 
If I'm not mistaken, the AC top-cart element is fixed width, so the fw class on those two icons is not essential, thus permitting use of a size class, such as 2x, instead of fw. 
IMO - these icons look better at 2x, and I also prefer the "fa-dollar" over the "fa-money" icon as a checkout symbol, but that's just personal preference. 
Easy to change these 2 icons: cart_top.tpl.

A final bit of trivia: the global search continues for the 'perfect' checkout icon.  There is a 2-year history of user requests to Font Awesome that they create a "cash register" icon, but so far that request has not been met.