VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: LukeVenter on August 26, 2015, 10:00:30 AM

Title: Checkout Table Not Responsive
Post by: LukeVenter on August 26, 2015, 10:00:30 AM
Hi Guys,

I know this type of checkout is native to GK Templates but there is no answer to this on their website either. Please help.

Obviously, the display of the products in the checkout page is in a table, so when this goes to mobile, it gives this "scroll horizontally to view whole table" message and my customers always get confused and often abandon the sale because of it. Is there any way to make this table responsive so that it fits on the mobile screen?

I have attached images of the web version (which is alright) and the mobile version, where I'm having some issues.

I want to avoid having to buy a checkout plugin so if you could recommend any free ones that are good I would also appreciate that if there is no other way to resolve this issue. (I would prefer to just resolve the issue) :)

The URL is www.puristcoffee.com
Title: Re: Checkout Table Not Responsive
Post by: jenkinhill on August 26, 2015, 10:11:24 AM
Checkout in the latest VirtueMart release (3.0.9.6) is already responsive if you use the default VM template system, so maybe have a look at that.

We cannot help with commercial template problems as major as the one you appear to be having. http://forum.virtuemart.net/index.php?topic=108212.0

Title: Re: Checkout Table Not Responsive
Post by: LukeVenter on August 26, 2015, 10:22:49 AM
Does my checkout look like the standard VM checkout? I didn't develop my site - still learning how to modify it.
Title: Re: Checkout Table Not Responsive
Post by: GJC Web Design on August 26, 2015, 11:42:07 AM
first make sure your on the latest VM  - with all the normal warnings

then try with the standard Protostar template

as you can see your cart has min widths so will never collapse enuf for 320px

<tr>
   <th align="left">Name</th>
   <th align="left">SKU</th>
   <th style="min-width:70px;width:5%;align:right;text-align:center">Price</th>
   <th style="min-width:120px;width:10%;align:right;text-align:center">Quantity      / Update</th>


      <th style="min-width:76px;width:5%;align:right;text-align:center"><span class="priceColor2">Discount</span></th>
   <th style="min-width:80px;width:5%;align:right;text-align:center">Total</th>
</tr>
Title: Re: Checkout Table Not Responsive
Post by: LukeVenter on August 26, 2015, 12:18:03 PM
Could you please guide in me using the checkout from a different template?
Title: Re: Checkout Table Not Responsive
Post by: LukeVenter on August 26, 2015, 12:27:30 PM
Yeah I did that. The prostar template look terrible, especially in relation to the rest of the site.
Title: Re: Checkout Table Not Responsive
Post by: GJC Web Design on August 26, 2015, 12:49:20 PM
that wasn't the suggestion -- the suggestion is for u to utilise the checkout table code form there