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

[top hatt]

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

[dbltoe]

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;}

[top hatt]

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?

[dbltoe]

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', '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.');

to

Line #16 : define('TEXT_SELECTED_BILLING_DESTINATION', 'Your billing address is shown above. 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.

[top hatt]

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.

[dbltoe]

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

[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 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'">&nbsp;Change Address&nbsp;</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

[dbltoe]

It's Sunday again.

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.

[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.

[dbltoe]

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.