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

[marton_1]

INSPECT the actual image... what is its REAL size? The HTML <img> tag is telling it to show at 94 x 54 - but it could be 94000000 X 54000000 in reality.

The ACTUAL size of the image must match the DECLARED size.

width="94" height="54"

[schoolboy]

Inspect the image on a machine that will tell you its actual size. Forget the mobile. You need to call up the image in a browser that has developer tools - or use an image editor.

[schoolboy]

width="94" height="54"

Ah... that's what I mean... In that case, I have no idea why it is rendering too big on mobile. Do you have a separate template for mobile? Or perhaps the mobile CSS is failing to declare it.

[marton_1]

Ah... that's what I mean... In that case, I have no idea why it is rendering too big on mobile. Do you have a separate template for mobile? Or perhaps the mobile CSS is failing to declare it.

Strange thing is that this standard zen cart image is part of the v155d distribution here "includes\templates\responsive_classic\images"

I am using the standard v155d template responsive classic.

[Website Rob]

Something is not right as earlier you stated the image was a "gif" but responsive_classic uses a "png" image.

includes/templates/responsive_classic/images/always-free-shipping.png (100x82)

includes/templates/template_default/images/always-free-shipping.gif (94x54)


With that said, looking at the CSS for the image and backtracking from there should help solve the problem.

[rbarbour]

I am not sure what was changed as far as the v155 thru v155d Responsive classic for I have been enjoying other ventures.

But the 155 version has the following code in responsive.css

img{max-width:100%;height:auto;border:0;}

I am using v155d Responsive classic.

I just had a problem in the mobile view (tablet and desktop OK). Some of the small icons show up as full screen width which is quite ugly, examples are the free shipping icon in the product listing or the waste bin (delete) in the shopping cart.
I could fix this by adding a class to each image icon using "class =" and setting the class size in responsive mobile css.
Probably an impossible question to answer but any idea why this happened?

[marton_1]

Something is not right as earlier you stated the image was a "gif" but responsive_classic uses a "png" image.

includes/templates/responsive_classic/images/always-free-shipping.png (100x82)

includes/templates/template_default/images/always-free-shipping.gif (94x54)


With that said, looking at the CSS for the image and backtracking from there should help solve the problem.

Lordy, Lordy you had me worried

I checked and my site is in two languages, so I use my German language free shipping icon for everything and changed the definition to always-free-shipping.gif

[marton_1]

I am not sure what was changed as far as the v155 thru v155d Responsive classic for I have been enjoying other ventures.

But the 155 version has the following code in responsive.css

img{max-width:100%;height:auto;border:0;}

When I do an "inspect" on my free shipping icon I do indeed see

img {
max-width: 100%;
height: auto;
border: 0;
}

[Website Rob]

When I do an "inspect" on my free shipping icon I do indeed see

img {
max-width: 100%;
height: auto;
border: 0;
}

Did I miss the part where a URL was provided in one of your posts? Easier to troubleshoot when we can see what you see.

[marton_1]

Did I miss the part where a URL was provided in one of your posts? Easier to troubleshoot when we can see what you see.

Sadly still on my xampp test site