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

schoolboy:

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"

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.

marton_1:

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.

schoolboy:

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.

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.

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;}

marton_1:

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?

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.

Lordy, Lordy you had me worried :shocking:

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

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;}

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

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

marton_1:

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.

Website Rob:

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

marton_1:

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

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

Be careful of altering this... you may be tempted to do this:

img {
    width: 75px;
    height: 50px;
    border: 0;
}

This will have a GLOBAL result. You need to nail down the CLASS (or perhaps its an ID) of the element in question, then write a block of css that declares ONLY for that element.

In:-

tpl_product_info_display the block of code for the free shipping icon is:

<!--bof free ship icon  -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon  -->

So there is an ID for the icon - #freeShippingIcon

Now... you need to declare a style for this ID and its associated image:

#freeShippingIcon img {height:94; width:54;}

ADD THIS declaration to just UNDER

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

in responsive css file

PS... mobile does not like absolute dimensions in the css - such as "94" and "54" - because of the wide variety of screens on all the myriad of hand-helds out there.

Use of % is strongly recommended - so what you might like to try is working out how large you'd like the image, relative to the page, then try some % parameters. This may or may not work.

You could also try the following:

#freeShippingIcon img {
max-width: 94;
height: auto;
border: 0;
}

(I'm not sure if there is a css command "max-height" - if there is, you can try applying it as well.)

Why is Responsive Classic so slow on tablets and iphones (marginally slower on desktop)? If I use Classic Original, product pages load 4-5 times faster than if I use the Responsive design. I would like to use Responsive, but I can't convince myself that it is the right thing to do because of speed issues.

Any insight would be appreciated. I'm running 1.5.5d in both my live and test shop. The test shop is ran in a shared SSL environment whereas the live is SSL but only for critical pages like login, logout, etc.

schoolboy:

In:-

tpl_product_info_display the block of code for the free shipping icon is:

Great, thanks.

mikeel100:

Why is Responsive Classic so slow on tablets and iphones (marginally slower on desktop)? If I use Classic Original, product pages load 4-5 times faster than if I use the Responsive design. I would like to use Responsive, but I can't convince myself that it is the right thing to do because of speed issues.

Any insight would be appreciated. I'm running 1.5.5d in both my live and test shop. The test shop is ran in a shared SSL environment whereas the live is SSL but only for critical pages like login, logout, etc.

What do you mean by slow?
Using these online speed testers testers my Responsive Classic 1.5.5d with full SSL the desktop loads in 1.5/1.8 seconds and mobile in 2.5/3.2 seconds.
if you use, for example, https://tools.pingdom.com/ it gives you clues where you are slow

Thanks for the quick reply and tip on the speed test site but I do not need a site to tell or show me something that is already obvious.

My ISP speed test is off the charts....

My tablet memory is not an issue....

Desktop runs lightening fast....

A product info page in responsive takes 8-10 seconds to load on samsung android while the same page in my custom classic only takes 2-3 seconds. I have applied all the speed up recommendations to both live and test shops and all other configurations are identical...except that the test shop is full shared ssl. Changing the link to non ssl does not change a thing...still slow.

Again, tablet and iPhone speeds are terrible in responsive. Does anyone know why? Cache method?

Thanks.

mikeel100:

Thanks for the quick reply and tip on the speed test site but I do not need a site to tell or show me something that is already obvious.

My ISP speed test is off the charts....

My tablet memory is not an issue....

Desktop runs lightening fast....

A product info page in responsive takes 8-10 seconds to load on samsung android while the same page in my custom classic only takes 2-3 seconds. I have applied all the speed up recommendations to both live and test shops and all other configurations are identical...except that the test shop is full shared ssl. Changing the link to non ssl does not change a thing...still slow.

Again, tablet and iPhone speeds are terrible in responsive. Does anyone know why? Cache method?

Thanks.

if you use, for example, https://tools.pingdom.com/ it gives you clues where you are slow

I've been working on this for a couple of days. The quantity box is vary large and even worse in the mobile view and if I use the grid plugin, it's even worse.
I've tried changing the settings in a couple of files that were suggested in another forum but nothing is working. I've also tried to change it in admin configuration.

Any thoughts as to how to make the quantity box smaller. I thought it would be easy.
You can see the issue on my test site http://spminiatures.com/storetest2/index.php?main_page=index&cPath=189_196_197
The test link is the template that's not using the grid plugin.

Any ideas? I've run out of them

Carol

spminis:

I've been working on this for a couple of days. The quantity box is vary large and even worse in the mobile view and if I use the grid plugin, it's even worse.
I've tried changing the settings in a couple of files that were suggested in another forum but nothing is working. I've also tried to change it in admin configuration.

Any thoughts as to how to make the quantity box smaller. I thought it would be easy.
You can see the issue on my test site http://spminiatures.com/storetest2/index.php?main_page=index&cPath=189_196_197
The test link is the template that's not using the grid plugin.

Any ideas? I've run out of them

Carol

The width is controlled in the stylesheet.css ".list-input input[type=text]" ca. line 316, you could change this.
You need to check if the class .list-input is used anywhere else on your site for size of input boxes!