Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

Hi:
I have a vanilla 1.5.6c test site and have a problem with the checkout shipping page layout ( Step 2 of 3 ) in Chrome. The order totals are down the middle of the page. ( Vertical not horizontal )

The page renders fine in Firefox and Edge.

I would appreciate any help.

My site is https://poolcuesexpress.com/156ctest

Thanks

yoursite.com/includes/templates/responsive_classic/css/stylesheet.css

on line 65, comment out (or remove) the min-width:0```
fieldset{border:0;padding:0.01em 0 0 0;padding-bottom:20px;padding-top:20px;margin:0;/* min-width:0; */margin-bottom:20px;}

Thank you.

That got it half way across the page, and horizontal. Any way to get it to match the rest of the page layout?

Closest you can come without taking apart the page code is.....

Stylesheet.css lines to be changed as follows

35 -- /float:right;/
231 -- /width:5.5em;/

includes/languages/english/checkout_payment.php

Line #16 : define('TEXT_SELECTED_BILLING_DESTINATION', '[B]Your billing address is shown to the left.[/B] The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.');
```to```
Line #16 : define('TEXT_SELECTED_BILLING_DESTINATION', '[B]Your billing address is shown above.[/B] The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.');

BTW, you have both the stylesheet_colors.css AND stylesheet_colors_split.css active. With the use of stylesheet_colors_split.css, stylesheet_colors.css should be renamed to something like stylesheet_colors.dth or either removed. Having both those files there will drive you crazy trying to figure out which one is doing the color. Right now, you don't readily see that as both are set to the default colors.

Thanks for your quick reply.

I tried those changes.

I ended up with the following:

In stylesheet.css

Line 59 - commented out display: inline;

Line 231 - commented out width: 5.5em;

Line 65 - reinstalled the min-width: 0;

That seems to get it to display correctly in all 3 browsers. I don't know if removing the display: inline; will affect anything else.

Let me know what you think.

The line 59 change affects at least the main page. Not sure about the others

I tried looking through the thread for a solution but didn't find anything.... I noticed that the "Your Total" portion on page Step 2 of 3 - Payment Information is all crammed together into a thin column while the "Discount coupon" and the "Payment method" are fine.

<h2 id="checkoutPaymentHeadingAddress">Billing Address:</h2>

<div id="checkoutBillto" class="floatingBox back">
<div class="buttonRow forward"><a href="https://my website.com/index.php?main_page=checkout_payment_address"><span class="cssButton normal_button button  button_change_address" onmouseover="this.className='cssButtonHover normal_button button  button_change_address button_change_addressHover'" onmouseout="this.className='cssButton normal_button button  button_change_address'"> Change Address </span></a></div>
<address>Milly Hummer<br /> 984 Glass Ave<br /> Glascow, PA    97764<br /> United States</address>
</div>


<div class="floatingBox important forward">Your billing address is shown to the left. The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.</div>
<br class="clearBoth" />


<fieldset id="checkoutOrderTotals">
<legend id="checkoutPaymentHeadingTotal">Your Total</legend>
<div id="otsubtotal">
    <div class="totalBox larger forward">$39.60</div>
    <div class="lineTitle larger forward">Sub-Total:</div>
</div>
<br class="clearBoth" />
<div id="otshipping">
    <div class="totalBox larger forward">$0.00</div>
    <div class="lineTitle larger forward">Shipping Option</div>
</div>
<br class="clearBoth" />
<div id="ottotal">
    <div class="totalBox larger forward">$39.60</div>
    <div class="lineTitle larger forward">Total:</div>
</div>
<br class="clearBoth" />
</fieldset>

Thank you,

Shrimp-Gumbo

It's Sunday again.:P

After further review, I like the /display:inline;/ method on line 59 the best. While it does effect every form, select, and input; I don't see any significant harm throughout the site.

Left and Right boxes are set up at 140px.... When I make the screen small to phone view it looks almost right but the dollar amounts are not showing in the correct spots.

shrimp-gumbo-mmmhhh:

Left and Right boxes are set up at 140px.... When I make the screen small to phone view it looks almost right but the dollar amounts are not showing in the correct spots.The sideboxes should not be showing in mobile or tablets in portrait mode. They are set to only show when the screen width is at a certain point.

That's why the responsive_classic has the four separate stylesheets for responsive.

This is the original responsive_template version 1.0 from v1.5.6a it seems like someone would have noticed this issue a long time ago.... is there a newer version out? Thank you!

I gave the side box information because someone previously mentioned something about an issue that sounded similiar but they were told to change the sidebox to a number divisible by 10..... my are so I cannot make that change to get it working.

Once again my problem is that the "Order Total" is sitting between the "billing address" and the billing address message as a very long column going down almost a page. But when I shrink the page it goes to the spot where I would expect it to but the order amounts are in front of the title headings.

Thank you!

shrimp-gumbo-mmmhhh:

I tried looking through the thread for a solution but didn't find anything.... I noticed that the "Your Total" portion on page Step 2 of 3 - Payment Information is all crammed together into a thin column

https://github.com/zencart/zencart/pull/2856

Thank you Scott! Simple <br> fix LOL! Thank you!

swguy:

https://github.com/zencart/zencart/pull/2856Good fix for desktop. Still needs work for mobile/tablet.

dbltoe:

Good fix for desktop. Still needs work for mobile/tablet.

Didn't see any issue there.

Sort of nit-picking.

Text for billing says "shown to left" when it's above in mobile.

Text for coupon code says "in the box next to" when it's below in mobile.

That's like trying to explain why you bought a different car than your neighbor.

Seriously, there are so many variations of screen size regardless of mobile or tablet.

Perhaps the author felt four doors were better than having to crawl into the back seat.:P

It's too much compressing of stylesheets that led us to develop a color change mod.

As you are starting new, I would suggest that you clone the responsive_classic and add the color mod from my sig's second line. It will help in getting the colors you want for your site.

Brinley:

I'm in the process of upgrading from 1.5.5 to 1.5.6 and getting to grips with the responsive_classic template and am just looking for some clarification.
I understand what the responsive mobile and tablet css files are for, but the responsive_default.css has me bemused as it is only triggered for desktop and yet it also has section within it media sections for Mobile & Tablet?

Can anyone explain why this is the case please ?

Cheers
Brinley

I'm pretty sure the author created responsive default CSS so that your site was still responsive and appeared correctly on mobile and tablet devices if mobile detect didn't detect that your customer was using a mobile or tablet device.

It also made it easy for people to create a responsive template using the response of default CSS and adding those changes to the mobile or tablet specific CSS for when hey mobile or tablet device was detected.

Just my opinion not sure what the author was thinking.

I just upgraded to 1.5.6c

The invoices and packing slip all include the header and logo. How do I get rid of that?

You can find those files in YOUR_ADMIN/invoice.php and YOUR_ADMIN/packingslip.php
These files do not use the template overwrite system.

This looks to be the code you want to remove:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td class="pageHeading"><?php echo nl2br(STORE_NAME_ADDRESS); ?></td>
        <td class="pageHeading" align="right"><?php echo zen_image(DIR_WS_IMAGES . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT); ?></td>
      </tr>
    </table>

and likely you want to remove the line too:

<tr>
        <td colspan="2"><?php echo zen_draw_separator(); ?></td>
      </tr>