mobile friendly CART, no horizontal scroll needed

[Zengraph]

some changes on the global.css files to show tables responsive in a block mode for CART on order steps. No need anymore of the horizontal scrolling bar.. now more user friendly :)

[SLiCK-303]

This is when you are checking out, and looking at your Shopping Cart. Stock there is horizontal scrolling needed to see all the options for each product in the cart. This mod rearranges the view of each product in the cart, making it so no horizontal scrolling is needed.

[Zengraph]

"Your changes are in file css/global.css. However, all files in css folder are generated from files stored in sass folder, so your changes would be overwritten on the next rebuild. Could you please update sass file(s), please"

Yes, sorry for that but I did try to, but it takes a lot of time.. not sure when I'll be able to complete it.

[wartinw]

Is somebody using this modification? I tried to, and it works as it doesn't show the scroll, but there are some glitches with product tables.

[Zengraph]

Is somebody using this modification? I tried to, and it works as it doesn't show the scroll, but there are some glitches with product tables.

What kind of glitches are you talking about, can you illustrate or describe it please ?

[wartinw]

What kind of glitches are you talking about, can you illustrate or describe it please ?

Last time I tried I made the changes manually, I suspect I did something wrong. Now I've downloaded your global.css and everything is into table bounds. My fault.

It would be really nice if cart_description and cart_product rows could be merged into one, though. I mean product's image with its description with the trash can...

[wartinw]

To show how could it be done, I tried changing shopping-cart-product-line.tpl by merging the two columns into one, and using

to show the content in two columns (plus one free for remove icon):

<td class="cart_product clearfix">
 <div class="col-xs-4 col-sm-4 col-md-4">
            picture
 </div>
  <div class="col-xs-5 col-sm-6 col-md-6">
            product description
  </div>
   <div class="col-xs-3">     <!-- space for trash can -->
  </div>
</div>

I had to add a
after SKU too.

Can it be done using just CSS and without changing template?

[wartinw]

Better with 'In stock' in the same row. I just included the {if $PS_STOCK_MANAGEMENT} block into the third

and played with col- numbers.

[wartinw]

Is somebody using this modification? I tried to, and it works as it doesn't show the scroll, but there are some glitches with product tables.

What kind of glitches are you talking about, can you illustrate or describe it please ?

I found what I meant the other day. It happens when the product has discounts.

edit: I added class="cart_total clearfix" to shopping-cart-product-line.tpl, line 125 in order to make that row bigger.

[projectmb]

Have try to implement the modification, but I still have to scroll for phones