ShopSite Forums

I was curious about how to formate the shopping cart and checkout pages for mobile devices. I did my own header and footer for these pages that is a very simple but I notice the whole cart is laid-out with tables so it doesn't scale down for mobile devices. Is there a simple/easy solution?

Code Sample:

# Start the shopping cart form
[-- SC_Form --]
<table border="0" width="0" align="center">
[-- IF SC_Registration --]
<tr>
<td align="center">
[-- SC_Registration --]
</td>
</tr>
[-- END_IF --]

#<!-- Reward Program -->#
#<!-- only appears if they've qualified. -->#
<tr>
<td align="center">[-- SC_Reward_Program --]</td>
</tr>

#<!-- Global Cross-sell in Cart -->#
[-- IF Global_Cross_Sell --]
<tr>
<td class="gcs_table"><table class="gcs_table">
<caption>[-- STORE.GlobalCrossSellHeader --]</caption>
<tr>
<td class="gcs_table_blank"> </td>
[-- LOOP GLOBAL_Cross_Sell --]
<td class="gcs_table_content">[-- GLOBAL_CROSS_SELL --]</td>
[-- END_LOOP Global_Cross_Sell --]
<td class="gcs_table_blank"> </td>
</tr>
</table></td>
</tr>
[-- END_IF --]

I would check out this Cookbook page for general info on responsive design for mobile:

https://www.shopsite.com/templates/cookbook/global-responsive-design.shtml

And this one about the new 'v2' replacement template tags for some of those cart tags that will output those cart elements in divs and spans instead of tables:

https://www.shopsite.com/templates/cookbook/tags-by-version.html#12

-Loren