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

[rlexyd]

I'm afraid when it comes to changing the layout of side columns with css I know just enough to be dangerous. As a starting point you could try adding this code to your responsive_default.css, responsive_mobile.css & responsive_tablet.css - checking of course that it has no ill effects elsewhere:

@media (max-width:767px) {
.onerow-fluid>[class*="col"]:nth-child(3){float:none;}
}

Thank you Simon, you did it :)
It looks good and from what I can see, it doesn't seem to have any side effects.

[dbltoe]

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

[rlexyd]

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

Thank You for making sure I get it right :)
Yes, I placed that code in both sections mentioned.

[rlexyd]

The category fly-out color is on line 1329 of jquery.menu.all.css. I would do an override in something like stylesheet.zcustom.css. That way, it's easier to find later.
A quick way to add the space is to create a blank cat. No name, description, nothing. Put the sort order last of your cats.

Just realised I haven't actually replied to your helpful post, sorry.
Thank you, I managed to get it to work as per Your advice (NO WAY I could have done that without you narrowing it down for me).
It was very tricky to be honest as I also wanted to change the colour when you actually click on the category links, there was so many options and it wasn't as easy/clear as I thought it would be, especially having to keep clearing my browsers cache to force the new css to download on every change I made. I probably will attempt a few more colour changes in the near future as well.

[rlexyd]

I just noticed another issue on my TEST website, not sure what I did for this to happen as I can't see that display error on my live site?!
https://i.imgur.com/EVUxUS5.png
As you can see from the snapshot above, when I click the Show All Products link from the main page, the page doesn't display well (via desktop),
The products display weird, lots of spacing and not aligned with each other, boxes and pricing are not aligned and looks messy, also displays that way on new and featured products links.
The products should be displayed like the 2nd product in the snapshot, yet some like the 1st and 3rd products are not displaying well.
Any help would be appreciated?

[rlexyd]

Just bumping this up..as I can't seem to find the reason for this?
Any help would be greatly appreciated.

[simon1066]

I just noticed another issue on my TEST website, not sure what I did for this to happen as I can't see that display error on my live site?!
https://i.imgur.com/EVUxUS5.png
As you can see from the snapshot above, when I click the Show All Products link from the main page, the page doesn't display well (via desktop),
The products display weird, lots of spacing and not aligned with each other, boxes and pricing are not aligned and looks messy, also displays that way on new and featured products links.
The products should be displayed like the 2nd product in the snapshot, yet some like the 1st and 3rd products are not displaying well.
Any help would be appreciated?

Add this to stylesheet.css (put it after .listing-left) and play around with the width:

.listing-right {
    width: ???%;
}

[rlexyd]

Add this to stylesheet.css (put it after .listing-left) and play around with the width:

.listing-right {    width: ???%; }

Woow, Thank you very much again Simon!!
That did the trick, would love to have your knowledge :)

[simon1066]

Woow, Thank you very much again Simon!!
That did the trick, would love to have your knowledge :)

No problem. I couldn't have done it without the use of a browser's developer tools. A matter of inspecting the various elements in and around the problem area and seeing what might need to be tweaked/added. It's easy to experiment with different options if the answer isn't immediately obvious.

[richard7315]

Hmmm ... it appears that all the desktop-based "mobile emulators" do show the CSS buttons in mobile mode, but some of the actual mobile devices are still rendering them shaped as lighter-colored pill buttons.

I imagine Anne has a quicker fix for that than I do.

Hi,
We are having the same issue with our site – the CSS buttons are correct when using mobile emulators (such as firefox or chrome devtools) but lighter coloured ‘pill’ style buttons are displaying on iphone/ipad.

I believe this issue is present in version 1.5.7c as well as 1.5.6 and 1.5.5.

The add to cart button seems to be affected on the product info page (but unaffected on the product listing).

Does anyone know of a fix for this bug? We are having trouble locating the code that causes this issue.

Any help would be much appreciated.
Many thanks