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

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?

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

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?

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

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

simon1066:

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 :)

rlexyd:

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.

DrByte:

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

I'm not finding a way to see this. I am currently using the Chrome extension found at https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk?hl=en It even has the new iPhones.

Regardless of whether toggling the view in the Chrome inspect window or using the extension, it's best to clear the cache after starting either one.

Could you do a screen shot of the differences and post them here?

Hi,
Thank you for your reply - I have attached some screenshots showing the issue. The desktop based mobile emulators seem to display correct CSS buttons. I can confirm that I have cleared the browser cache and this did not make a difference.

The issue can be seen when using actual mobile devices (I have tested with a new iphone SE, iphone X and ipad).

The light coloured pill style buttons appear on the product info page ‘add to cart’ (the page with the full product description) and the ‘search’ button in the mobile menu. This issue was mentioned in post #12.

I believe the buttons are styled by CSS – unfortunately I have been unable to find the code that is causing this issue.
If possible please could you check on a mobile device to see if you can replicate the issue.

Many thanks

richard7315:

Hi,
Thank you for your reply - I have attached some screenshots showing the issue. The desktop based mobile emulators seem to display correct CSS buttons. I can confirm that I have cleared the browser cache and this did not make a difference.

The issue can be seen when using actual mobile devices (I have tested with a new iphone SE, iphone X and ipad).

The light coloured pill style buttons appear on the product info page ‘add to cart’ (the page with the full product description) and the ‘search’ button in the mobile menu. This issue was mentioned in post #12.

I believe the buttons are styled by CSS – unfortunately I have been unable to find the code that is causing this issue.
If possible please could you check on a mobile device to see if you can replicate the issue.

Many thanks

Hi Richard,

Try adding the following to your stylesheet.css, it worked for me.

input.submit_button, input.cssButtonHover { -webkit-appearance: none; }

https://www.zen-cart.com/showthread.php?219735-Responsive-Classic-%28built-in-to-Zen-Cart-v1-5-5%29-Support-Thread&p=1383119#post1383119

Hi rlexyd
Thank you for your reply – I had missed the posts from you and janks regarding this issue. I have tried the suggested code and it seems to work perfectly.
Many thanks for your help – it is much appreciated. I have submitted a bug report so this will hopefully be fixed on future versions of Zen Cart.

I just installed latest zc. I have categories in the horizontal header bar. But they don't appear in the responsive view. With my other site 1.5.7, the categories do appear in responsive view. Is this something that has changed in 157C? I really would like to have the categories appear across my repsonsive view. Most customers don't know how to use the drop down menu.

So, I am not having this problem with my other 157C websites. Whatever the problem is, its not related to zc version. Anyone know why I am not seeing categories bar on my android or tablet?

Seriously? You know why they are missing, we had a conversation about this and you fixed it on at least one site... Category tabs are hidden on mobile
and nobody cares that you think it is a bug because you think everything is a bug that is not exactly as you want it out of the box.

barco57:

Seriously? You know why they are missing, we had a conversation about this and you fixed it on at least one site... Category tabs are hidden on mobile
and nobody cares that you think it is a bug because you think everything is a bug that is not exactly as you want it out of the box.

I considered that a possibility. I'll have to find the solution. Is it in this thread? It is true though that half the people have no clue about drop down menus on cell phones. You're lucky if they can figure out its possible to scroll down. No point in showing these people, they never remember it 2 minutes after you show them.

I dont remember saying it was a bug in my most recent post.

pixelpadre:

So, I am not having this problem with my other 157C websites. Whatever the problem is, its not related to zc version. Anyone know why I am not seeing categories bar on my android or tablet?

ok, so i just searched this thread and can't find it anywhere.

Header banner is obstructed by menu bar at least on my android.

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

#logoWrapper {width:100%;
height:215px;
background-image:url('../includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

GoldBuckle:

I am upgrading to v157c from v157. I copied these lines from the stylesheet.css in v157 to the stylesheet.css in v157c (inserted after line #100) but I am getting a big blank white space. The .jpg is in the includes/templates/responsive_classic/images/ folder and I can access it directly in my browser by itself just not on the site. Is it safe to list the url to the test site here on a public forum when it is in a folder on my current live site or did I give you enough info to help?

#logoWrapper {width:100%;
height:215px;
background-image:url('../includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}I would first make sure the image is in the correct folder (I know... probably done already but.....)
Then, I would suspect the .. in the image link.
If you right-click on the space, does the inspect show the image when you hover over it? If not, the image is missing or the link is incorrect. Preceding could cause the code to not be processed.
IF all those fail, you may have messed up the preceding or following lines of code in the file.
It would be easier to diagnoase if we had a look.

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

#logoWrapper {
width:100%;
height:215px;
background-image:url('[B].[/B]/includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

It would be much simpler with```
#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}

***
The real problem is what happens on varying screen sizes including mobile phones.  With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not.  As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen.  Just your DPS image and the text underneath does not work on a mobile phone.  The last line is lost.

Other problems include the use of the tagline div twice.  A div should not be used twice UNLESS they are on separate pages.  Here, you would need to change it to a class.  https://tinyurl.com/y9f2bjlp

There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.:no:

I think I understand what you are saying...thanks for breaking it down. Considering what you said regarding the responsive issue, do you have any ideas you could share as to how to accomplish what I am trying to do. The most important thing to me is to have the logo, hours and contact info prominently there to make it as easy as possible for someone to contact me via phone or email. Next most important is the file types and payment methods accepted. Before I created the background image and added the info there, in my opinion it looked to empty with just the logo on a desktop device. "As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen" How is this text in violation and how do I fix it so it is not in violation?

dbltoe:

Several Problems

One . is the answer for what you were trying although that is not what is currently on your site. The link on your site looks in the yoursite.com main images folder. The image is actually in your template's images folder.

Might be something to discuss in 1.5.8 to make the template's images folder something like images_tpl to avoid confusion.

BTW. You can safely post a URL by using DOT like yoursiteDOTcom. SEs won't react to that and the forum helpers can get a look at the site.

Here's what should be there if doing what you wanted.

#logoWrapper {
width:100%;
height:215px;
background-image:url('[B].[/B]/includes/templates/responsive_classic/images/discount_printing_service_background.jpg');
background-repeat:no-repeat;
}

> 
> It would be much simpler with```
#logoWrapper {height:235px;}
#logo{background:url('./includes/templates/responsive_classic/images/discount_printing_service_background.jpg') no-repeat center;
}
```***BUT....
> ***
> The real problem is what happens on varying screen sizes including mobile phones.  With text in front of a background image, you must take into account what will happen as the image becomes responsive and the text does not.  As it is now, the "Going beyond..." text violates ADA/WCAG even without going to a smaller/mobile screen.  Just your DPS image and the text underneath does not work on a mobile phone.  The last line is lost.
> 
> Other problems include the use of the tagline div twice.  A div should not be used twice UNLESS they are on separate pages.  Here, you would need to change it to a class.  https://tinyurl.com/y9f2bjlp
> 
> There are a lot more adjustments to be made but your original premise is really not going to work without a set screen size.:no: