Best approach to display everything under one column when accessed via mobile

[AeroLogistica]

Howdy fellow geeks, so we are using cube cart 6.2.9 and it doesn't longer have the mobile theme right? It adjusts automatically for mobile view so what would be the best approach to display everything under one column when accessed through mobile? The thing is that it would be useful only for mobile because it looks good on desktop, product image left column and right column product options. Thanks in advance guys!

regards,

AJ
 

[bsmither]

It is an easy edit, but won't survive an upgrade (as the Foundation skin skin gets replaced in its entirety). So, keep these notes.

In the template element.product.horizontal_gallery.php:

Find:

<div class="small-5 medium-7 columns horizontal">

Change to:

<div class="small-12 medium-7 columns horizontal">

Find:

<div class="small-7 medium-5 columns">

Change to:

<div class="small-12 medium-5 columns thickpad-left">

In the template element.product.vertical_gallery.php:

Find:

<div class="small-5 medium-{if is_array($GALLERY) && count($GALLERY) > 1}6{else}7{/if} columns text-center nopad">

Change to:

<div class="small-12 medium-{if is_array($GALLERY) && count($GALLERY) > 1}6{else}7{/if} columns text-center nopad">

Find:

<div class="small-7 medium-5 columns thinpad-left">

Change to:

<div class="small-12 medium-5 columns thickpad-left">

The skin uses either the horizontal or vertical gallery template, but the edit was applied to both just to be complete.

[AeroLogistica]

Dude, you are the best! It looks beautiful but it also affects desktop view, which looked good before. Is there a way to isolate them, to stay unchanged when accessing desktop and to apply changed when accessing mobile?

regards,

AJ

[bsmither]

I don't see this experiment on your /play/ store.

But using my browser's Developer Tools, I made the edits to the source HTML retrieved by the browser and the layout change works fine - to 'mobile'-width and back to 'desktop'-width.

[AeroLogistica]

Thanks brother, I mean it not like it doesn't look good, let me rephrase, it looks off center, something minimal but drives me crazy haha.

[bsmither]

For this page, I think your image is too big.

Somewhere, there is a missing "max-height:225px".

You say you are running CC629?

There has been a fix for this:

https://github.com/cubecart/v6/issues/2842

 

Edited March 14 by bsmither

[bsmither]

Please try this. Download CC6410. Extract just the template files element.product.vertical_gallery.php and element.product.horizontal_gallery.php.

Replace the two existing template files with these, and re-apply the edits above.

If you can get into your admin, there will be a "Clear Cache" button in the upper-right of the admin screen. Click it.

If you can't get into admin, on any web address for your store, at the end, add:

?clear_cache=true