Bad Form Formatting (Not Responsive Friendly)

[BFChris]

Hi,

I'm working on redesigning a website using responsive templates based on the Shopsite "Full" template set.

I'm running into a LOT of issues where the embedded Shopsite code (ie. code output by a Shopsite tag and not editable) has a lot of extra formatting, particularly tables and nested tables with forms, that makes it nearly impossible to follow proper responsive design principles.

I've already resorted once to a jQuery javascript hack to force a table column to act like a new row.

My biggest issues are in the Customer Registration section, though.

For example, the form for a new customer registration outputs the name fields (Title, First, Middle, Last, Suffix) in a table in which the first row has cells for the labels and the second row cells for the form fields.

Obviously, 5 cells across is too wide on a phone screen. If I force the table cells to display block and 100% width, I end up with:

label
label
label
label
label
form field
form field
form field
form field
form field

Is there a fix for this I'm overlooking?

Also, could Shopsite please provide the option of outputting tag data withOUT extraneous formatting??? For forms especially, it would be nice to have just compliant form markup like:

<label for="form-field"><input></label>

or

<label></label><input>

[ShopSite David]

An option is to reduce the number of fields displayed. The fields are configured on Commerce setup > Order System > Checkout. You can removed Title, Suffix, etc. to reduce the screen real estate that it takes up.

[BFChris]

I actually just had this solution pop into my head last night and advised my client of the option.

I'm also toying with the idea of HIDING (via CSS) the non-required fields on small screens.

Still, it's a clunky solution as it requires a loss of data-gathering functionality.

Not an ideal solution and this page was only one of more than a few (particularly in the customer registration section) that required some creative coding to be mobile-friendly.

Definitely an area for improvement....

[BFChris]

Actually, I discovered a better option, at least for the Customer Registration "name" table issue.

While researching something else, I stumbled upon a new tag parameter "column" that can be added to the [--CRName--] tag that outputs that form table.

It outputs the name form fields in a column instead of all straight across a row.

First (input field)
Middle (input field)
Last (input field)

So [-- CRName column --] did exactly what I wanted.

It would be nice if this was documented better. The "Cheatsheet" doesn't document ALL the available tags and parameters.