Update the check page for small view
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 16 Nov 2017 21:44:03 +0000 (16:44 -0500)
committerSteve Sutton <steve@gaslightmedia.com>
Thu, 16 Nov 2017 21:44:03 +0000 (16:44 -0500)
adding in the small-12 for mobile

views/front/registrations/checkout.html

index d233050..e5e495a 100644 (file)
@@ -17,7 +17,7 @@
     </div>
 {/if}
 
-{if $haveCart}              
+{if $haveCart}
     <form id="checkoutForm" href="{$regUrl}" method="post">
         <input type="hidden" name="page" value="checkoutProcess">
         <input type="hidden" name="active" value="{$regAccount.fieldData.active.value}">
                     <h4>Account Information</h4>
   {if $regAccountId == 0}
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.email} glm-reg-required{/if}">E-Mail Address:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.email} glm-reg-fail{/if}"><input type="email" name="email" value="{$regAccount.fieldData.email}"{if $regAccount.fieldRequired.email} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.email} glm-reg-required{/if}">E-Mail Address:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.email} glm-reg-fail{/if}"><input type="email" name="email" value="{$regAccount.fieldData.email}"{if $regAccount.fieldRequired.email} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.password} glm-reg-required{/if}">Password:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.password} glm-reg-fail{/if}">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.password} glm-reg-required{/if}">Password:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.password} glm-reg-fail{/if}">
                             <input type="text" name="password" value="{$regAccount.fieldData.password}"{if $regAccount.fieldRequired.password} required{/if} title="Must be at least 8 characters long and contain at least one number and one puncuation character such as one of these #.-_,$%&!">
                             <p>A password is required to access your registrations and submissions in the future. A suggested password has been supplied.</p>
                         </div>
                     </div>
   {else}
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap">E-Mail Address:</div>
-                        <div class="glm-large-9 glm-columns">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap">E-Mail Address:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns">
                             {$regAccount.fieldData.email}
                             <input type="hidden" name="email" value="{$regAccount.fieldData.email}"> {* Required to keep E-Mail address from being cleared *}
                         </div>
                     </div>
   {/if}
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.fname} glm-reg-required{/if}">First Name:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.fname} glm-reg-fail{/if}"><input type="text" name="fname" value="{$regAccount.fieldData.fname}"{if $regAccount.fieldRequired.fname} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.fname} glm-reg-required{/if}">First Name:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.fname} glm-reg-fail{/if}"><input type="text" name="fname" value="{$regAccount.fieldData.fname}"{if $regAccount.fieldRequired.fname} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.lname} glm-reg-required{/if}">Last Name:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.lname} glm-reg-fail{/if}"><input type="text" name="lname" value="{$regAccount.fieldData.lname}"{if $regAccount.fieldRequired.lname} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.lname} glm-reg-required{/if}">Last Name:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.lname} glm-reg-fail{/if}"><input type="text" name="lname" value="{$regAccount.fieldData.lname}"{if $regAccount.fieldRequired.lname} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.org} glm-reg-required{/if}">Organization:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.org} glm-reg-fail{/if}"><input type="text" name="org" value="{$regAccount.fieldData.org}"{if $regAccount.fieldRequired.org} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.org} glm-reg-required{/if}">Organization:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.org} glm-reg-fail{/if}"><input type="text" name="org" value="{$regAccount.fieldData.org}"{if $regAccount.fieldRequired.org} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.title} glm-reg-required{/if}">Title:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.title} glm-reg-fail{/if}"><input type="text" name="title" value="{$regAccount.fieldData.title}"{if $regAccount.fieldRequired.title} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.title} glm-reg-required{/if}">Title:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.title} glm-reg-fail{/if}"><input type="text" name="title" value="{$regAccount.fieldData.title}"{if $regAccount.fieldRequired.title} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr1} glm-reg-required{/if}">Address:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.addr1} glm-reg-fail{/if}"><input type="text" name="addr1" value="{$regAccount.fieldData.addr1}"{if $regAccount.fieldRequired.addr1} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr1} glm-reg-required{/if}">Address:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr1} glm-reg-fail{/if}"><input type="text" name="addr1" value="{$regAccount.fieldData.addr1}"{if $regAccount.fieldRequired.addr1} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr2} glm-reg-required{/if}">&nbsp;</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.addr2} glm-reg-fail{/if}"><input type="text" name="addr2" value="{$regAccount.fieldData.addr2}"{if $regAccount.fieldRequired.addr2} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.addr2} glm-reg-required{/if}">&nbsp;</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.addr2} glm-reg-fail{/if}"><input type="text" name="addr2" value="{$regAccount.fieldData.addr2}"{if $regAccount.fieldRequired.addr2} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.city} glm-reg-required{/if}">City:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.city} glm-reg-fail{/if}"><input type="text" name="city" value="{$regAccount.fieldData.city}"{if $regAccount.fieldRequired.city} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.city} glm-reg-required{/if}">City:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.city} glm-reg-fail{/if}"><input type="text" name="city" value="{$regAccount.fieldData.city}"{if $regAccount.fieldRequired.city} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.state} glm-reg-required{/if}">State/Province:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.state} glm-reg-fail{/if}">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.state} glm-reg-required{/if}">State/Province:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.state} glm-reg-fail{/if}">
                             <select name="state">
                                 <option value=""></option>
                     {foreach $regAccount.fieldData.state.list as $s}
                         </div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.zip} glm-reg-required{/if}">Zip/Postal Code:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.zip} glm-reg-fail{/if}"><input type="text" name="zip" value="{$regAccount.fieldData.zip}"{if $regAccount.fieldRequired.zip} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.zip} glm-reg-required{/if}">Zip/Postal Code:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.zip} glm-reg-fail{/if}"><input type="text" name="zip" value="{$regAccount.fieldData.zip}"{if $regAccount.fieldRequired.zip} required{/if}></div>
                     </div>
                     <div class="glm-reg-row">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.country} glm-reg-required{/if}">Country:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.country} glm-reg-fail{/if}">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.country} glm-reg-required{/if}">Country:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.country} glm-reg-fail{/if}">
                             <select name="country">
                                 <option value=""></option>
                     {foreach $regAccount.fieldData.country.list as $c}
                 </div>
                 <div class="glm-large-6 glm-columns" style="">
                     <div class="glm-reg-row"><div class="glm-large-12 glm-columns"><h4>Billing Information</h4></div></div>
-                    <div class="glm-reg-row"><div class="glm-large-12 glm-columns"><input id="glm-reg-bill-same" type="checkbox" name="billing_same" value="1"{if $regAccount.billingSame} checked{/if}>&nbsp;Same as Account Information</div></div>                    
+                    <div class="glm-reg-row"><div class="glm-large-12 glm-columns"><input id="glm-reg-bill-same" type="checkbox" name="billing_same" value="1"{if $regAccount.billingSame} checked{/if}>&nbsp;Same as Account Information</div></div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fname} glm-reg-required{/if}">First Name:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fname} glm-reg-fail{/if}"><input type="text" name="bill_fname" value="{$regAccount.fieldData.bill_fname}"{if $regAccount.fieldRequired.bill_fname} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fname} glm-reg-required{/if}">First Name:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fname} glm-reg-fail{/if}"><input type="text" name="bill_fname" value="{$regAccount.fieldData.bill_fname}"{if $regAccount.fieldRequired.bill_fname} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_lname} glm-reg-required{/if}">Last Name:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_lname} glm-reg-fail{/if}"><input type="text" name="bill_lname" value="{$regAccount.fieldData.bill_lname}"{if $regAccount.fieldRequired.bill_lname} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_lname} glm-reg-required{/if}">Last Name:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_lname} glm-reg-fail{/if}"><input type="text" name="bill_lname" value="{$regAccount.fieldData.bill_lname}"{if $regAccount.fieldRequired.bill_lname} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr1} glm-reg-required{/if}">Address:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr1} glm-reg-fail{/if}"><input type="text" name="bill_addr1" value="{$regAccount.fieldData.bill_addr1}"{if $regAccount.fieldRequired.bill_addr1} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr1} glm-reg-required{/if}">Address:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr1} glm-reg-fail{/if}"><input type="text" name="bill_addr1" value="{$regAccount.fieldData.bill_addr1}"{if $regAccount.fieldRequired.bill_addr1} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr2} glm-reg-required{/if}">&nbsp;</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr2} glm-reg-fail{/if}"><input type="text" name="bill_addr2" value="{$regAccount.fieldData.bill_addr2}"{if $regAccount.fieldRequired.bill_addr2} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_addr2} glm-reg-required{/if}">&nbsp;</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_addr2} glm-reg-fail{/if}"><input type="text" name="bill_addr2" value="{$regAccount.fieldData.bill_addr2}"{if $regAccount.fieldRequired.bill_addr2} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_city} glm-reg-required{/if}">City:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_city} glm-reg-fail{/if}"><input type="text" name="bill_city" value="{$regAccount.fieldData.bill_city}"{if $regAccount.fieldRequired.bill_city} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_city} glm-reg-required{/if}">City:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_city} glm-reg-fail{/if}"><input type="text" name="bill_city" value="{$regAccount.fieldData.bill_city}"{if $regAccount.fieldRequired.bill_city} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_state} glm-reg-required{/if}">State:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_state} glm-reg-fail{/if}">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_state} glm-reg-required{/if}">State:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_state} glm-reg-fail{/if}">
                             <select name="bill_state">
                                 <option value=""></option>
                     {foreach $regAccount.fieldData.bill_state.list as $s}
                                 <option value="{$s.value}"{if $regAccount.fieldData.bill_state.value == $s.value} selected="selected"{/if}>
                                     {$s.name}
                                 </option>
-                    {/foreach} 
+                    {/foreach}
                             </select>
                         </div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_zip} glm-reg-required{/if}">Zip/Postal Code:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_zip} glm-reg-fail{/if}"><input type="text" name="bill_zip" value="{$regAccount.fieldData.bill_zip}"{if $regAccount.fieldRequired.bill_zip} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_zip} glm-reg-required{/if}">Zip/Postal Code:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_zip} glm-reg-fail{/if}"><input type="text" name="bill_zip" value="{$regAccount.fieldData.bill_zip}"{if $regAccount.fieldRequired.bill_zip} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_country} glm-reg-required{/if}">Country:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_country} glm-reg-fail{/if}">
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_country} glm-reg-required{/if}">Country:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_country} glm-reg-fail{/if}">
                             <select name="bill_country">
                                 <option value=""></option>
                     {foreach $regAccount.fieldData.bill_country.list as $c}
                         </div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_phone} glm-reg-required{/if}">Phone:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_phone} glm-reg-fail{/if}"><input type="text" name="bill_phone" value="{$regAccount.fieldData.bill_phone}"{if $regAccount.fieldRequired.bill_phone} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_phone} glm-reg-required{/if}">Phone:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_phone} glm-reg-fail{/if}"><input type="text" name="bill_phone" value="{$regAccount.fieldData.bill_phone}"{if $regAccount.fieldRequired.bill_phone} required{/if}></div>
                     </div>
                     <div class="glm-reg-row glm-reg-bill-field">
-                        <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fax} glm-reg-required{/if}">FAX:</div>
-                        <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fax} glm-reg-fail{/if}"><input type="text" name="bill_fax" value="{$regAccount.fieldData.bill_fax}"{if $regAccount.fieldRequired.fax} required{/if}></div>
+                        <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.bill_fax} glm-reg-required{/if}">FAX:</div>
+                        <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.bill_fax} glm-reg-fail{/if}"><input type="text" name="bill_fax" value="{$regAccount.fieldData.bill_fax}"{if $regAccount.fieldRequired.fax} required{/if}></div>
                     </div>
                 </div>
             </div>
             <div class="glm-reg-row">
                 <div class="glm-large-6 glm-columns">
                     <h4>Payment Information</h4>
-     
+
     {$pm = $payMethodsNumb.NoCharge}
     {if $payMethods.{$pm}.default}
                     <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></h5>
                     <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}"> {$payMethods.{$pm}.name}</label></h5>
                     <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.comp_code} glm-reg-required{/if}">Enter code:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.comp_code} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.comp_code} glm-reg-required{/if}">Enter code:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.comp_code} glm-reg-fail{/if}">
                                 <input type="text" name="comp_code" value="{$regAccount.fieldData.comp_code}"{if $regAccount.fieldRequired.comp_code} required{/if} class="payMethodInput payMethodInput_{$pm}">
                             </div>
                         </div>
                     <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
                         <p>*** Cash ****</p>
                     </div>
-                    
+
     {/if}
     {$pm = $payMethodsNumb.Check}
     {if $payMethods.{$pm}.default}
                     <h5><input id="payMethodButton_{$pm}" type="radio" name="payMethod" value="{$pm}" class="payMethodSelector" required {if $payMethod == {$pm}} checked{/if}><label for="payMethodButton_{$pm}">  {$payMethods.{$pm}.name}</label></h5>
                     <div id="payMethod_{$pm}" class="payMethodSelection glm-hidden">
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_name} glm-reg-required{/if}">Name on Card:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_name} glm-reg-required{/if}">Name on Card:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_name} glm-reg-fail{/if}">
                                 <input type="text" name="cc_name" value="{$regAccount.fieldData.cc_name}"{if $regAccount.fieldRequired.cc_name} required{/if} class="payMethodInput payMethodInput_{$pm}">
                             </div>
                         </div>
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_type} glm-reg-required{/if}">Card Type:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_type} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_type} glm-reg-required{/if}">Card Type:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_type} glm-reg-fail{/if}">
                                 <select name="cc_type" class="payMethodInput payMethodInput_{$pm}">
                                     <option value=""></option>
                         {foreach $regAccount.fieldData.cc_type.list as $c}
                             </div>
                         </div>
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_numb} glm-reg-required{/if}">Card Number:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_numb} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_numb} glm-reg-required{/if}">Card Number:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_numb} glm-reg-fail{/if}">
                                 <input type="text" placeholder="Numbers Only" name="cc_numb" value="{$regAccount.fieldData.cc_numb}"{if $regAccount.fieldRequired.cc_numb} required{/if} class="payMethodInput payMethodInput_{$pm} cc-input">
                            </div>
                         </div>
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_exp} glm-reg-required{/if}">Card Expiration:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_exp} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_exp} glm-reg-required{/if}">Card Expiration:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_exp} glm-reg-fail{/if}">
                                 <input type="text" placeholder="MM/YY" name="cc_exp" value="{$regAccount.fieldData.cc_exp}"{if $regAccount.fieldRequired.cc_exp} required{/if} class="payMethodInput payMethodInput_{$pm} expire-input">
                             </div>
                         </div>
                         <div class="glm-reg-row">
-                            <div class="glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
-                            <div class="glm-large-9 glm-columns{if $regAccount.fieldFail.cc_cvv} glm-reg-fail{/if}">
+                            <div class="glm-small-12 glm-large-3 glm-columns glm-reg-nowrap{if $regAccount.fieldRequired.cc_cvv} glm-reg-required{/if}">CVV:</div>
+                            <div class="glm-small-12 glm-large-9 glm-columns{if $regAccount.fieldFail.cc_cvv} glm-reg-fail{/if}">
                                 <input type="text" placeholder="3 or 4 digit security code on back of card" name="cc_cvv" value="{$regAccount.fieldData.cc_cvv}"{if $regAccount.fieldRequired.cc_cvv} required{/if} class="payMethodInput payMethodInput_{$pm} cvv-input">
                             </div>
-                        </div>                    
+                        </div>
                     </div>
     {/if}
     {$pm = $payMethodsNumb.PayPal}
             <div class="glm-right" style="white-space; nowrap;">
                 <span class="glm-reg-warning">You have one more step to complete your registration!</span> <img src="{$assetUrl}/fingerRightRed.svg" style="height: 2em;"> <input id="regSubmitButton" type="submit" value="Submit Registration Request" class="button tiny">
             </div>
-    
+
 
         </form>
-        
+
         <div id="regSubmitDialog" title="Please wait...">Please wait while we process your registration request. If you don't see a new page, your registration request may not have been processed.</div>
         <div id="regSubmitFailDialog" title="Oops!">
             <h3>Something may have gone wrong.</h3>
             <p>
                 It may be that your registration request was received and processed and you didn't receive our response yet.
                 If you still don't see a response in a while, try returning to the cart using the button above.
-                If still don't see any response, please check your E-Mail to see if you have been sent a confirmation. 
+                If still don't see any response, please check your E-Mail to see if you have been sent a confirmation.
             </p>
             <p>
-                In any case, we will never process your request more than once. If you can return to the cart, it should say if 
+                In any case, we will never process your request more than once. If you can return to the cart, it should say if
                 your request was recieved and processed. If not, you may try the checkout process again or come back later.
             </p>
         </div>
         $('.payMethodSelector').on('change', function() {
 
             // Get the value from the selected Payment Method
-            var payMethod = $(this).val(); 
-            
+            var payMethod = $(this).val();
+
             // Hide all pay method inputs and dissable them all
             $('.payMethodSelection').addClass('glm-hidden');
             $('.payMethodInput').attr('disabled', true);
             // Show the selected pay method inputs and enable just those
             $('#payMethod_' + payMethod).removeClass('glm-hidden');
             $('.payMethodInput_' + payMethod).removeAttr('disabled');
-            
+
         });
 
         // Dissable checkout button when first clicked to prevent multiple attempts
             // Dissable the checkout button and replace button text
             $('#regSubmitButton').attr('disabled', true);
             $('#regSubmitButton').val('Processing ... please Wait!');
-            
+
         });
 
         // Start with all pay method inputs dissabled
         $( document ).ready(function() {
 
             // Dialog box to show when submitting checkout page
-            $( "#regSubmitDialog" ).dialog({ 
-                autoOpen: false, 
+            $( "#regSubmitDialog" ).dialog({
+                autoOpen: false,
                 width: 600
             });
 
             // Dialog box to show if no answer from checkout submission after some time
-            $( "#regSubmitFailDialog" ).dialog({ 
-                autoOpen: false, 
+            $( "#regSubmitFailDialog" ).dialog({
+                autoOpen: false,
                 width: 600
             });
 
                 $('.glm-reg-bill-field').addClass('glm-hidden');
             } else {
                 $('.glm-reg-bill-field').removeClass('glm-hidden');
-            }            
+            }
         };
         isBillSameChecked();
-        
+
         // Various input masks for credit card input
         $(".cc-input").mask("9999999999999?999");
         $(".expire-input").mask("99/99");
         $(".cvv-input").mask("999?9");
-        
+
     });
-</script>
\ No newline at end of file
+</script>