cart page not fully respoaive

[maille]

Cart page only responsive to tablet size. Will reduce to smart phone size on all pages except cart. Price columns and check out button off screen. No horizontal scroll bar so cannot get to price and checkout button.
Can use html and css. Havent a clue on php
Tried on window 7, windows 10 internet explorer 11 and mazilla firefox 57.0.2 - and before someone tells me I do us mozilla web development tools.
Running on localhost via wampserver joomla 3.8.2, Virtuemart 3.2.6, php 7.1.9, mariaDB 10.2.8

[AH]

create overrides for the cart display items

One way is to add a class selector to the headers and the table elements,  that can then be hidden for responsive sizes.

eg

<th class="mobile-hide"> stuff </th>


<td class="mobile-hide"> stuff </td>



In your responsive css

.mobile-hide {
display:none;
}

[maille]

Many thanks for the prompt reply. Will give it a go.

[AzMandius]

Does this solution simply hide non responsive part of the table on smartphones?

What about a solution that would properly adapt the entire table vertically, as far as i heard, there are adaptive table css techniques.

Thanks.

[Studio 42]

You have to use DIV to have better render on mobile.
Eg with bootstrap 2.3(protostar)
<div class="row">
<div class="span4">My Name<br>My SKU</div>
<div class="span2">My Price </div>
<div class="span2">My Quantity</div>
<div class="span2">My Discount</div>
<div class="span2">My Total</div>
</div>
Eg with bootstrap 3(helix framework)
<div class="row">
<div class="col-sm-4 col-xs-12">My Name<br>My SKU</div>
<div class="col-sm-2 col-xs-6">My Price </div>
<div class="col-sm-2 col-xs-6">My Quantity</div>
<div class="col-sm-2 col-xs-6">My Discount</div>
<div class="col-sm-2 col-xs-6">My Total</div>
</div>
And you have to hide header on mobile

[AzMandius]

Possible to have a bit more info on in what file, and where in it to apply this code?

Thanks.

[Studio 42]

It's to many work to check all changes.
But original product list is in file iYOURJOOMLA/components/com_virtuemart/views/cart/tmpl/default_pricelist.php
TO copy in YOURJOOMLA/templates/YOURTEMPLATE/html/com_virtuemart/cart/default_pricelist.php so you can continue to update Virtuemart