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

[linuxguy2]

Looks like you got it going. Please be sure to share your resolution with others.

No, I don't have it going. No problem adding column Grid Layout and switching on 4 columns.

The issue is when you shrink the screen OR view on a small device in landscape mode all the formatting is messed up.
Go to the site on a small device OR just shrink your browser window and you'll see the corruption.

http://pcsnnets.com/tp18

[linuxguy2]

No, I don't have it going. No problem adding column Grid Layout and switching on 4 columns.

The issue is when you shrink the screen OR view on a small device in landscape mode all the formatting is messed up.
Go to the site on a small device OR just shrink your browser window and you'll see the corruption.

http://pcsnnets.com/tp18

BTW
I have not touched the css files.

[dbltoe]

I checked your site on an iPhone 6+ with Safari, Chrome, and Firefox before replying. Both the portrait and landscape appear to be working fine. (Apparently you are not using 1.5.5f as it does not have our banner included in the banner list. It's there in 1.5.6.)

Anything else you may be doing differently than the norm? Hard to fix what doesn't appear to be broken.

[linuxguy2]

I checked your site on an iPhone 6+ with Safari, Chrome, and Firefox before replying. Both the portrait and landscape appear to be working fine. (Apparently you are not using 1.5.5f as it does not have our banner included in the banner list. It's there in 1.5.6.)

Anything else you may be doing differently than the norm? Hard to fix what doesn't appear to be broken.

It is ZC Version 1.5.5f. I have turned off some sideboxes and banners.
Be sure you are looking at a Categories > Prod 001 or Prod 002 page.

When i do landscape mode on my iPhone-6S there is a huge horizontal space between the images and the text (items name etc.. ..) which pushes the text into the next row and off the bottom of the screen.
In landscape mode do your get two columns or one? If your only getting one column then it probably looks OK.
The landing page and All products looks OK.
Be sure you are looking at a Categories > Prod 001 or Prod 002 page

Also on a regular browser when you narrow from 4 columns to 2 columns the formatting on a Prod 001 or Prod 002 page gets ugly. It only has the CGL plugin installed.

Should there not be a point when the display/screen "Jumps" from 4 to 2 columns then to 1 column on a browser?
The way it is now it gets ugly as you narrow the screen.

Looks OK on an iPad.

[dbltoe]

Be sure you are looking at a Categories > Prod 001 or Prod 002 page.

When i do landscape mode on my iPhone-6S there is a huge horizontal space between the images and the text (items name etc.. ..) which pushes the text into the next row and off the bottom of the screen.
In landscape mode do your get two columns or one? If your only getting one column then it probably looks OK.
The landing page and All products looks OK.
Be sure you are looking at a Categories > Prod 001 or Prod 002 page

Also on a regular browser when you narrow from 4 columns to 2 columns the formatting on a Prod 001 or Prod 002 page gets ugly. It only has the CGL plugin installed.

This is why I wish we could go repossess cars, houses, property, or SOMETHING when we don't get the posting tips! You even gave us a link to the wrong location.

AND, you just casually dropped in the fact that you have Column Layout Grid installed! While it is designed for 1.5.5, it does have some cautions.

This new version comes with new install instructions packaged with the 1.55f fileset.

It is backwards compatible to 1.54 for certain however as always the line numbers will be off and I would recommend paying attention to the changes 1.55f has regarding new CSS elements that have been added to the stock Zen Cart 1.55x - these were NOT present in the older versions.

I'm not familiar with the add-on so, I'll just ask if you have gone through all the instructions and settings.

[linuxguy2]

Please go back and read my post of 13 Aug 2018, 11:44 PM: to which your reply was "Looks like you got it going. Please be sure to share your resolution with others.".
The website link is valid and I stated the CGL plugin was installed.

At that point I could only assume you looked at the home page and did not drill down into the "categories > Prod 00x" where the problem exists.

To answer your question regarding correct installation of the plugin: Yes I have put the installation through the wringer on more than one test setup and it is installed per the instructions. I've been using CGL on ZC 1.5.X since 2014 on non-responsive templates.
The issue is the formatting ( probably CSS ) and if not direct help I was hoping for some hints that would point me in the right direction.

ALSO
If I'm having these issues with the responsive_classic template and CGL then I'm sure others are also experiencing the same or similar issues. The tendency is to say this plugin doesn't work and move on and the issues don't get resolved.
This damages the reputation of Zen Cart.

[twitchtoo]

linuxguy2, I can see the problem you're describing with Column Grid Layout for 1.55f on your site. From what I can tell it is the CSS layout specifically for landscape orientation.

However it may be tied to this:

I have also found a bug in the responsive switch where Zen doesn't have matching code statements for mobile/tablet/other possibilities. The original coders were not consistent in their use of the mobile switch. There are conditions where the mobile switch has no information, is null or blank or has no output code to render anything on screen correctly using the CSS.

So, I will take a swing at the CSS now for a visual fix and post it for you, I've already started sorting the mobile switch bug as a separate project.

[linuxguy2]

linuxguy2, I can see the problem you're describing with Column Grid Layout for 1.55f on your site. From what I can tell it is the CSS layout specifically for landscape orientation.

However it may be tied to this:

I have also found a bug in the responsive switch where Zen doesn't have matching code statements for mobile/tablet/other possibilities. The original coders were not consistent in their use of the mobile switch. There are conditions where the mobile switch has no information, is null or blank or has no output code to render anything on screen correctly using the CSS.

So, I will take a swing at the CSS now for a visual fix and post it for you, I've already started sorting the mobile switch bug as a separate project.

Thank You!

[twitchtoo]

linuxguy2, In your CSS template specific files try changing the height: 100%; for all instances of .list-image to max-height: 100%; (especially the responsive_mobile.css)

Let me know if the div's get back in line for your site and I'll publish the recommendation on the CGL for 155f support thread.

[linuxguy2]

linuxguy2, In your CSS template specific files try changing the height: 100%; for all instances of .list-image to max-height: 100%; (especially the responsive_mobile.css)

Let me know if the div's get back in line for your site and I'll publish the recommendation on the CGL for 155f support thread.

Very Good!
Changing those height settings in the responsive_mobile.css fixed the landscape issue on the iPhone6S.
Goes from 1 column in portrait mode to 2 columns in landscape mode nicely.
And changing it in responsive_default.css makes the browser display behave much better when narrowing the display.

On browser displays there are still some issues with alignment of the text and boxes under the product image but I think that can be fixed with alignment tweaks in either the css or changing the div's in the appropriate CGL product listing code.
Maybe CGL needs a little more work and because there are multiple settings it may not be straight forward.