Layout Issue 1.5.7

[mprough]

Zen Cart 1.5.7 fresh install no code changes at all
PHP Version: 7.3.21

First issue
If I change Column Width - Left to 225px like I need (right column is 0 OFF) it breaks the layout like this:


Second issue

<div id="pinfo-right" class="group grids">

is longer than the add to cart:

I have found no change in all these stylesheets to resolve this.

includes/templates/responsive_classic/css/responsive_default.css

Line #147 : #pinfo-left, #pinfo-right, #cart-box, div#productReviewLink{float:none;}

Line #148 : #pinfo-left, #pinfo-right, #cart-box{width:100%;}

Line #154 : #pinfo-right{float:left;width:48%;}

Line #328 : #pinfo-left, #pinfo-right, #cart-box, div#productReviewLink{float:none;}

Line #329 : #pinfo-left, #pinfo-right, #cart-box{width:100%;}

Line #335 : #pinfo-right{float:left;width:49%;}

includes/templates/responsive_classic/css/responsive_mobile.css

Line #136 : #pinfo-left, #pinfo-right, #cart-box{float:none;}

Line #137 : #pinfo-left, #pinfo-right, #cart-box{width:100%;}

Line #143 : #pinfo-right{float:left;width:49%;}

Line #366 : #pinfo-left, #pinfo-right, #cart-box, div#productReviewLink{float:none;}

Line #367 : #pinfo-left, #pinfo-right, #cart-box{width:100%;}

Line #373 : #pinfo-right{width:100%;}

includes/templates/responsive_classic/css/responsive_tablet.css

Line #230 : #pinfo-right{float:left;width:49%;}

includes/templates/responsive_classic/css/stylesheet.css

Line #350 : #pinfo-right{float:right;width:55%;padding:20px 0 0 0;}

Line #377 : #docGeneralDisplay #pinfo-right{background:none;}

includes/templates/responsive_classic/css/stylesheet_colors.css

Line #21 : input:focus, select:focus, textarea:focus, #mainWrapper, .specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover, .categoryListBoxContents:hover, .sideBoxContentItem:hover, .productListing-odd, #pinfo-right, #sendSpendWrapper {background:#f4f4f4;}

Line #42 : #docGeneralDisplay #pinfo-right, #popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart{background:none;}

There seems to be contradictory styles for this ID.

Any help is appreciated.

~Melanie

[dbltoe]

It's probably the responsive.css file that's giving you the problem. It has no setting for col225 so it's going to decide for itself what everything else should be.

You might try 220 or 230 to see if that will work.

[mprough]

It's probably the responsive.css file that's giving you the problem. It has no setting for col225 so it's going to decide for itself what everything else should be.

You might try 220 or 230 to see if that will work.

Thanks dbltoe, that worked =). I'm not very familiar with Foundation. Any clue on the other layout issue?

[dbltoe]

It is not unusual to find yourself going in circles when dealing with some layout issues in responsive_classic when changing sizes. The ultra-minimization not only caused a color problem, it also caused MANY duplicatons.

The responsive_###### stylesheets will not load until at least tablet maximum is met in the screen presentation. The line 350 of the stylesheet.css is the reason for line 134 of Responsive_default.css, 143 of responsive_mobile.css, and 230 of responsive_tablet.css.

If it were me, I would pull the #pinfo-right out of line 21 in the stylesheet_colors.css, remove lines 350, 134, and 230 mentioned above, and change line 350 of stylesheet.css to simply say float:right. It gets crazy without the float:right on the desktop. The width can take care of itself until someone feels a necessity to change it.

Then, on a mobile phone, you'll find duplicates for the width in responsive_mobile.css on lines 367 and 373 (IMHO, one of those should stay). And, a float:none at line 366 which I like for the mobiles. Haven't looked at the tablet.

It gets more convoluted as you go. I wish I could have straightened more up before 1.5.7 but accessibility was the driving force there. I have spent many hours since the release of 1.5.7 trying to tighten up these things but, it's a VERY time-consuming process.

Not really sure if that is the problem you are concerned about. If I'm off on a different tangent, can you be a little more specific as to what you want to see?

The desktop with the changes above.
Attachment 19159
One of the things that's got me scratching my head right now is the image of the standard socket presenting itself lower than all the others with no actual or residual margin or padding.

[jodean]

It is not unusual to find yourself going in circles when dealing with some layout issues in responsive_classic when changing sizes. The ultra-minimization not only caused a color problem, it also caused MANY duplicatons.

The responsive_###### stylesheets will not load until at least tablet maximum is met in the screen presentation. The line 350 of the stylesheet.css is the reason for line 134 of Responsive_default.css, 143 of responsive_mobile.css, and 230 of responsive_tablet.css.

If it were me, I would pull the #pinfo-right out of line 21 in the stylesheet_colors.css, remove lines 350, 134, and 230 mentioned above, and change line 350 of stylesheet.css to simply say float:right. It gets crazy without the float:right on the desktop. The width can take care of itself until someone feels a necessity to change it.

Then, on a mobile phone, you'll find duplicates for the width in responsive_mobile.css on lines 367 and 373 (IMHO, one of those should stay). And, a float:none at line 366 which I like for the mobiles. Haven't looked at the tablet.

It gets more convoluted as you go. I wish I could have straightened more up before 1.5.7 but accessibility was the driving force there. I have spent many hours since the release of 1.5.7 trying to tighten up these things but, it's a VERY time-consuming process.

Not really sure if that is the problem you are concerned about. If I'm off on a different tangent, can you be a little more specific as to what you want to see?

The desktop with the changes above.
Attachment 19159
One of the things that's got me scratching my head right now is the image of the standard socket presenting itself lower than all the others with no actual or residual margin or padding.

dbltoe, I would like to try your suggestion. Unfortunately I am not a CSS expert. Could you provide the text of the actual line changes?

[dbltoe]

Always best to give us a look at what you are wanting to change. Use DOT for . if you don't wnat the SE's to find the site just yet.

[jodean]

I was going to follow your suggestions to see if it solved my problem with Chrome erroring out when adding YouTube embed code to a product description. It works just fine in Firefox but still errors out in Chrome.

[dbltoe]

I was going to follow your suggestions to see if it solved my problem with Chrome erroring out when adding YouTube embed code to a product description. It works just fine in Firefox but still errors out in Chrome.

Please see the answer in the other thread. Works fine for myself and others in Chrome.

[jodean]

Please see the answer in the other thread. Works fine for myself and others in Chrome.

Trust me I believe you that Chrome is working for others. I have tried the Cache extension and it still does not work. I see that the Chrome browser is able to run the YouTube but it will not run inside my ZenCart application.