Overview

In this tutorial we are going to examine a portion of a merchants' storefront, specifically a static page from  the merchant's website that was built using tables for the pay layout.

The Storefront system is built upon a responsive framework that automatically adjusts to the screen size of the customers device.

But tables do not play nicely with the responsive framework, so the solution is to convert the table based styling of this page to a responsive friendly CSS based design.

Example Static Page Using Tables for Styling

So here we see the page looks fine (other than a few broken images) when viewed from a typical desktop environment.

View with screen at smallest view (Desktop)

We are not seeing the responsive framework we want to see, due to the table based styling copied over fro the original page.

View from iphone 4s

We see again that the responsive framework is no longer active, the table structure is not adjusting to the width of the device screen as it ideally would with responsive friendly page styling in place of the table styling.

Using Storefronts Admin bar to open the static page content editor

UltraCart has an editing tool available when we view the storefronts from a browser that we are currently logged into the back end editor.

Here we see this from the perspective of the static page of this merchants' storefront:

We can edit the content by choosing "Page" from the Storefronts Admin menu, then choosing "Edit" in the pop-up menu, then clicking on "Content" in the second menu, which opens the page content editor in the UltraCart backend:

Here is where we get the source code that needs to be converted from tables to the equivalent styling via CSS.