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

Hello,

I am trying to find where is control of product description font size?

https://www.idtagsonline.com/test/index.php?main_page=product_info&cPath=1&products_id=142

Or this should be done via CKeditor for each product separatly?

I can not isolate using "Inspect element" tool where to change just product description font.
Anything I try is changing fonts of other sections of the page.

Thank you for suggestion in advance.

To figure things like this out, download Chrome (if you don't have it), select a block of text in the description, right click and choose Inspect. It will open a window that will show you this element. You'll see #productDescription is set in stylesheet.css line 356.

Actually you are controlling the font size. You have insert css styling into your product description as such:```

<p align="justify"> <font face="verdana,arial,helvetica,sans-serif"><font color="#000000"><font size="1"><strong>Medical ID Bracelet</strong>, IDB39 (size 1-3/4" x 1/2"), is made from non allergic Stainless Steel and is hand polished to the mirror finish. It is guaranteed to be rust free for the life. Raised medical emblem is located on the left side of the plate to allow additional engraving on the front. The enameled medical logo, which is attached to the plate, come in either <strong><font color="#ff0000">red,</font></strong><font color="#000099"><strong>blue</strong></font> or <font color="#ff00cc"><strong>pink</strong></font> colors. <br /><br /><font face="verdana,arial,helvetica,sans-serif"><font color="#000000"><font size="1"><font size="1"><span style="COLOR: black; mso-bidi-font-size: 10.0pt">The bracelet tag is slightly curved for wrist wear. <br /><br /><span style="COLOR: black; mso-bidi-font-size: 10.0pt">It is featured regular (3/16" or 5 mm) curb chain with sister hook or lobster clasp.</span></span></font></font></font></font></font></font></font><font face="verdana,arial,helvetica,sans-serif"><font color="#000000"><font size="1"><font face="verdana,arial,helvetica,sans-serif"><font color="#000000"><font size="1"><font size="1"><span style="COLOR: black; mso-bidi-font-size: 10.0pt"><br /></span></font></font></font></font><font color="#000000" face="verdana,arial,helvetica,sans-serif"><font size="1"><br /></font></font><font color="#000000" face="verdana,arial,helvetica,sans-serif"><span style="FONT-SIZE: 10pt; mso-bidi-font-size: 12.0pt"><font size="1">We can engrave 4 lines (14 Characters Max. in each line) on the front side and 4 lines (20 Characters Max. in each line) on the backside of personal or medical information on the tag. If you would like to engrave just backside, leave front side fields empty.<br /></font></span></font><font size="1"><span style="COLOR: black; mso-bidi-font-size: 10.0pt"><br /></span></font></font></font></font><font color="#000000" face="verdana,arial,helvetica,sans-serif"><font size="1">Please choose correct length of the chain.<br />If you are not sure about right length, please refer to suggested document<strong>: </strong>"</font><a title="How to choose appropriate length of the Medical ID Bracelet" href="[URL]http://www.idtagsonline.com/bracelets_length.htm[/URL]" target="_blank"><font size="1">How to choose appropriate length of the Medical ID Bracelet</font></a><font size="1">"<br /><br /></font></font><font color="#000000" face="verdana,arial,helvetica,sans-serif"><font color="#800080" size="1" face="verdana,arial,helvetica,sans-serif"><u><a title="Medical ID bracelets." href="[URL]http://idtagsonline.com/[/URL]" target="_blank">Thanks for visiting idtagsonline.com store.</a></u></font></font></p> ```Right off the bat, you're telling it to use a font size of 1. First of all, it would be better if you left it out and controlled it in the stylesheet (stylesheet.css line 27). I would have broken it out better for display, but it's very confusing code. This often happens when you try several times to change the font or color without doing so in Source mode.

You have nested fonts, most of which are incorrect. Then there's the fact that, somewhere else there's a font-size:x-small being carried over into the description div.

You also have a <u> with no <li>

How about doing this:
If you don't have ckeditor installed, do so. Great editing tool
With it installed, go to the product in question and click on the Source button.
Delete all the text in the description
Add the following code while the Source button is still highlighted:```

<p align="justify"><strong>Medical ID Bracelet</strong>, IDB39 (size 1-3/4" x 1/2"), is made from non allergic Stainless Steel and is hand polished to the mirror finish. It is guaranteed to be rust free for the life. Raised medical emblem is located on the left side of the plate to allow additional engraving on the front. The enameled medical logo, which is attached to the plate, come in either <strong><font color="#ff0000">red</font></strong>, <font color="#000099"><strong>blue</strong></font> or <font color="#ff00cc"><strong>pink</strong></font> colors.</p><p>The bracelet tag is slightly curved for wrist wear.</p> <p>It is featured regular (3/16" or 5 mm) curb chain with sister hook or lobster clasp.</p> <p>We can engrave 4 lines (14 Characters Max. in each line) on the front side and 4 lines (20 Characters Max. in each line) on the backside of personal or medical information on the tag. If you would like to engrave just backside, leave the front side fields empty.</p> <p>Please choose correct length of the chain.<br /> If you are not sure about right length, please refer to suggested document:<br /> <a href="https://www.idtagsonline.com/bracelets_length.htm" target="_blank" title="How to choose appropriate length of the Medical ID Bracelet">How to choose appropriate length of the Medical ID Bracelet</a><br /> <br /> <a href="https://idtagsonline.com/" target="_blank" title="Medical ID bracelets.">Thanks for visiting idtagsonline.com store.</a></p> ```Click again on the Source button to reveal the resultant html.

Hopefully that fixes it all. Still concerned about where the x-small is coming from.

swguy:

To figure things like this out, download Chrome (if you don't have it), select a block of text in the description, right click and choose Inspect. It will open a window that will show you this element. You'll see #productDescription is set in stylesheet.css line 356.Chrome is good for finding these things. However, line 356 is alignment, float, width, and padding. The actual size in an unaltered stylesheet.css is defined under .biggerText around line 27 or 28.

The real kicker is where that x-small font size is coming from.:dontgetit

I, appreciate your advise, though it will take me time to digest it. :smile:

Just would like to say that I did not insert any code except it was suggested to me by forum:

In very beginning of /public_html/test/includes/templates/your_template/css/stylesheet.css

body {
margin:0em;
padding:0em;
border:0;
background:#fff;
color:#333;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:0.9em;

All other codes are results of migration to new updates since 2005.
Major "drama' was conversion to responsive template. I also had to convert database to UTF8 to eliminate funny characters.

Again, I did not add myself anything else.

I do have CKeditor and it works if I change font size, but I need then to do it in all gazillion products.
This, also can be done.

I, am also, puzzled with the source of this line:

font[Attributes Style] {font-size: x-small;}

Could not find the word** x-small** in any css.

Will keep working on it.

x-small is computed by your browser. If you want to set an explicit size, you can do so, of course.

Just would like to say that I did not insert any code except it was suggested to me by forum:I was referring to all the font calls in the product description.
Those are better left to the stylesheet to control.

Hi,
I have a fresh 1.5.5f install and using the amazing responsive_classic template with Image Handler 5 and Fual Slimbox installed.
I have been trying to Enlarge the SMALL images displaying on the What's New products on the main page in the centre column NOT sidebox, am I missing something?

Hope someone can help as I've given up as I'm sure it used to be in the Images section?!

Classic Responsive Template in landscape mode on iPhone6s ( and iPhone5) switches to two columns but runs off the bottom of the display rendering it useless. Should be able to remedy this in css but how??

Should one not be able to narrow a window on a browser and have it "Jump" from 4 to 2 columns without all the display contortions in between?

Test Site With The only mod installed is the Column Grid Layout.
http://pcsnnets.com/tp18

Any suggestions are welcome.

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

dbltoe:

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.

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.

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.

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.

linuxguy2:

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.:frusty: :censored: :frusty:

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.:shocking:

AND, you just casually dropped in the fact that you have Column Layout Grid installed!:blink: 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.

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.

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.

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.

Thank You!

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

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.

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.