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

[torvista]

at 360+ posts since this template was included in the core, is anyone maintaining a version that has all the anomalies/errors/improvements etc. that have been flagged up since then...to avoid people late to the party having to trawl the entire thread for those nuggests?

[lat9]

at 360+ posts since this template was included in the core, is anyone maintaining a version that has all the anomalies/errors/improvements etc. that have been flagged up since then...to avoid people late to the party having to trawl the entire thread for those nuggests?

Kind of, sort of ... not exactly.

Seriously, I've got the template portions broken out so that I could pre-stage the template in some older Zen Cart installations, but haven't really been keeping up. I'll get a GitHub repository started (using 1.5.5e-3 as the change-basis), then with the community's help on identifying the changes we can get this template up-to-date.

[amayze]

Anyone else experiencing this issue?

Yes. And I think I've found the problem(s).

The first issue is that the width of fieldset div is set to 80% or 90% in repsonsive_mobile.css. This shouldn't be a problem, but it is done with !important, so it's not possible to override it. It forces both the totalBox and the lineTitle to be very wide, and therefore they won't fit on the same line. So first comment out or delete part of responsive_mobile.css:

fieldset input[type=tel], fieldset input[type=date], fieldset textarea, /* fieldset div */, fieldset .inputLabel, fieldset input[type=text], fieldset input[type=email]{width:85% !important;margin:0  0 0 20px !important;}

This appears in two places, once for landscape and the other for portrait mobiles.

Secondly there is another line which sets the .forward tags to be too wide and removes the float:right from them as well. So comment out this line too:

/* #checkoutPayment .forward, #checkoutShipping .forward{float:none; width:95%;} */

Again it is in two places.

Now you'll probably find that the margins allowed are too big to let all the titles fit so you might want to add something like the following below the above line(s) in responsive_mobile.css:

fieldset div {margin-left:2px;}
.totalBox {width:25%;}
.lineTitle {width:60%;}
#checkoutOrderTotals div {margin-right:10px;}

In this case you might want different values for the portrait and landscape sections as the space available is obviously different.

Hope this helps - I realise it doesn't answer your actual question, but it does fix the behaviour to be the same as on a desktop.
N.B. Similar changes may be requires in responsive_tablet.css, but I've only just sussed this out for responsive_mobile.css and haven't had a chance to check yet.

To swap the order of the lines you need to swap the order of lines 18 and 19 in /includes/templates/YOUR_TEMPLATE/templates/tpl_modules_order_totals.php. But don't do this if you make the above changes.

Yours,

Andrew

[gunni]

Hi
I found something strange with href link.
I put the Featured products on the main page and the "hand" pointer is shown when the mouse is over the
gray box of the featured product. When pressed on the price number for example or under, no page is being redirected to.
Please try: My site

found the solution: in file Stylesheet.css around line 269:

specialsListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew{font-size:1.6em;cursor:pointer;padding:20px 0;}

I deleted "cursor: pointer;" so the "fake" icon of the link will not be shown where there is no real link.
Do not worry, when hover on a real link, the hand pointer apears.

Do not understand why to make a link pointer without a real link...

[techietom911]

Hello, I upgraded from 1.5.1 to 1.5.5e and the test site is still non responsive. I looked at the source and the HTML still points to the "classic" files. Where do I go to change this to point to the "responsive"?

Thank you for your direction.

[dbltoe]

Hello, I upgraded from 1.5.1 to 1.5.5e and the test site is still non responsive. I looked at the source and the HTML still points to the "classic" files. Where do I go to change this to point to the "responsive"?

Thank you for your direction.

One wonders how the upgrade was done. If you used something other than https://www.zen-cart.com/entry.php?3...d-of-upgrading, that may be part of the problem. Auto intalls/upgrades from hosts can be a problem.
If you DID follow the above instructions, there may be a file missing with the upload.
Template selection in a properly setup Zen Cart can be done in the Admin >> Tools >> Template Selection.
Once you get all working, I would suggest using lat9's clone a template mod to copy your template changes to one that will survive update.

[marton_1]

Hello, I upgraded from 1.5.1 to 1.5.5e and the test site is still non responsive. I looked at the source and the HTML still points to the "classic" files. Where do I go to change this to point to the "responsive"?

Thank you for your direction.

Admin/Tools/Template

[techietom911]

One wonders how the upgrade was done. If you used something other than https://www.zen-cart.com/entry.php?3...d-of-upgrading, that may be part of the problem. Auto intalls/upgrades from hosts can be a problem.
If you DID follow the above instructions, there may be a file missing with the upload.
Template selection in a properly setup Zen Cart can be done in the Admin >> Tools >> Template Selection.
Once you get all working, I would suggest using lat9's clone a template mod to copy your template changes to one that will survive update.

At the end of the upgrade article (How do I do an upgrade and still keep my live store running in the meantime?) in steps 1-9, I miss understood #3 and copied 1.5.5e on top of every existing folder. I should have removed the old folders and replaced them with the new ones instead, then deleted files that don't belong anymore.

I think I got it now. Thank you

[Nick1973]

Responsive Classic on 1.5.5e - Any idea why I when clicking on a product it is only showing the product image and not the rest of the content of the page when on a mobile phone?

[dbltoe]

if no footer shows, start here.
https://www.zen-cart.com/content.php?124-blank-page