On mobile, how to display product as one column CC 6

[AeroLogistica]

Hi fellow Geeks, so, on mobile, the product view is two columns initially, the left, fits the product image and the right, fits options (drop down menu). It would look nice if it was displayed as one column, title, product image and options. How can I achieve this? Thanks in advance!



regards,

AJ

[bsmither]

In the Foundation skin template element.product.vertical_gallery.php, use the following (make a backup of the existing file):

<ul class="small-block-grid-1 medium-block-grid-2">
<li>
<div class="row">
   <div  class="medium-3 columns thinpad-right off-canvas-for-small vertical">
      <div id="scrollUp" class="scroller"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg></div>
      <ul class="{if !is_array($GALLERY) || count($GALLERY) < 2}hide-important {/if}clearing-thumbs small-block-grid-1" id="scrollContent" data-clearing>
         {foreach from=$GALLERY item=image}
         <li><a href="{$image.source}" class="th"><img src="{$image.small}" data-image-swap="{$image.medium}" data-caption="{$PRODUCT.name}{if !empty($image.image_tags.title)}: {/if}{$image.image_tags.title}" class="image-gallery" alt="{if isset($image.image_tags.alt) && !empty($image.image_tags.alt)}{$image.image_tags.alt}{else}{$image.name}{/if} - {$LANG.catalogue.click_enlarge}"{if isset($image.image_tags.title)} title="{$image.image_tags.title}"{/if}></a></li>
         {/foreach}
      </ul>
      <div id="scrollDown" class="scroller"><svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></div>
   </div>
   <div class="small-12 medium-9 columns text-center nopad small-centered">
      <a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>
      <p class="show-for-small-only">{if is_array($GALLERY) && count($GALLERY) > 1}{$LANG.catalogue.tap_gallery}{else}{$LANG.catalogue.tap_enlarge}{/if}</p>
   </div>
</div>
</li>
<li>
<div class="row">
   <div class="small-12 columns thinpad-left">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}
   </div>
</div>
</li>
</ul>

 

[AeroLogistica]

Just beautiful @bsmither. Thank you!