Tableau Responsive Theme - Support Thread

[mikestaps]

Why are slider images and my payments image looking stretched in mobile? http://www.gelcandlecompany.com/demo2/
I kept my slider images the same size as the stock images too.

The payment methods image looks to be stretched in desktop as well (in chrome anyways). Adding:

.footer--message img {
	max-height: 23px;
	max-width: 206px;
}

to the stylesheet.css should fix that. I would put it near the css for the .footer--message around line 530.

The flexslider.css file has a min-height set around line 177, turning that off in the inspector in chrome fixes the stretched images in the slider.

[spawnie69]

The payment methods image looks to be stretched in desktop as well (in chrome anyways). Adding:

.footer--message img {
	max-height: 23px;
	max-width: 206px;
}

to the stylesheet.css should fix that. I would put it near the css for the .footer--message around line 530.

The flexslider.css file has a min-height set around line 177, turning that off in the inspector in chrome fixes the stretched images in the slider.

Thanks Mike! I managed to get my payment image to show ok now thanks!

On the flexsider.css file I see this on line 177

.flexslider .slides img {
min-height: 130px

How do i shut this off? I can edit this file and upload.
I think you were saying that I can shut his off in chrome using element inspector? I'm sorry for sounding dumb but how do I do that? I right click and click on inspect element and I could see Styles Event Listener etc..am I able to make a change somewhere in here just for observation?

thanks mike for your insight I hope I help someone someday.

[Jen56789]

Hi Zenners! I love the new Tableau template, especially for the responsive part, but noticed the product page on quite a few Tableau sites doesn't show the way it should on my smartphone. Although header and footer rescale fine, the middle/product section displays incorrectly, most obviously the image which runs off the right edge (only showing roughly 3/4 before going off the edge) and the Add To Cart button which also runs off the right edge. I considered I might have edited some files incorrectly but several of the sites mentioned in this thread have the same error (the product section not quite corresponding with the width of the screen). The standard laptop/computer page looks fine. Basically, the only site I could find which does have the product page displayed the way it should is this one (direct link to a product page): https://www.ayrbags.co.uk/shop/index...qZjUTlPbjAbFx2 Pretty much all others I came across have The Bug... : (. Btw I got the most recent version of both Zen and Tableau. Does anyone recognise this? Can it be solved? Thanks for your help!! Jen

[lindasdd]

Hi Zenners! I love the new Tableau template, especially for the responsive part, but noticed the product page on quite a few Tableau sites doesn't show the way it should on my smartphone. Although header and footer rescale fine, the middle/product section displays incorrectly, most obviously the image which runs off the right edge (only showing roughly 3/4 before going off the edge) and the Add To Cart button which also runs off the right edge. I considered I might have edited some files incorrectly but several of the sites mentioned in this thread have the same error (the product section not quite corresponding with the width of the screen). The standard laptop/computer page looks fine. Basically, the only site I could find which does have the product page displayed the way it should is this one (direct link to a product page): https://www.ayrbags.co.uk/shop/index...qZjUTlPbjAbFx2 Pretty much all others I came across have The Bug... : (. Btw I got the most recent version of both Zen and Tableau. Does anyone recognise this? Can it be solved? Thanks for your help!! Jen

I was not able to replicate this. Can you provide an example and also what type of device you are using to check.

[lindasdd]

Is there a way to change the product info page accordian to tabs without a complete rewrite? I attempted the rewrite, got about 99% complete and had to toss it due to one nagging issue.

[Jen56789]

I was not able to replicate this. Can you provide an example and also what type of device you are using to check.

Using a Samsung Phone. I've attached a picture - See how the product picture (top) and Add To Cart button do not fit the screen. Could it be a value in the CMS menu?

[spawnie69]

Using a Samsung Phone. I've attached a picture - See how the product picture (top) and Add To Cart button do not fit the screen. Could it be a value in the CMS menu?

It maybe files or version. Tableau at numinix is 1.6.8 Zen cart's download is still on 1.6.6.
I am running zen cart 1.54 with tableau 1.6.8 at www.gelcandlecompany.com/demo2
All looks good on my samsung s3 except my stretched top logo.

[Jen56789]

Thanks for your reply! Yes your product page looks fine on my phone. Does this link show correctly too on your phone? (fyi this is not my site, which is not active): http://www.kathijahzohra.com/basic-j...ane-in-chili1? Thanks for checking! zenid=6315151967e7cd0fac7e64c3d680af61

It maybe files or version. Tableau at numinix is 1.6.8 Zen cart's download is still on 1.6.6.
I am running zen cart 1.54 with tableau 1.6.8 at www.gelcandlecompany.com/demo2
All looks good on my samsung s3 except my stretched top logo.

[lindasdd]

Using a Samsung Phone. I've attached a picture - See how the product picture (top) and Add To Cart button do not fit the screen. Could it be a value in the CMS menu?

I see what you mean. I fiddled with it a bit using Firebug, but without a full file compare I couldn't find the issue.

There is div somewhere on the page that is stretching past the edge. That then is pushing the container past the edge and allowing all elemnts with width 100% to also stretch.

On my test and production sites I have it working correctly so the default should be correct.

As an aside, I find styling this template to be rather difficult due to the reset.css file.

[Jen56789]

Actually Spawnie69 was right, this problem is solved by one of the latest updates listed at the Numinix site (the Zen Cart site does not list the most recent version)! Installing the files from the 1.6.7 update fixes the bug. I'd advice all users of an earlier version to check whether their product page looks ok on cell phone and if not install the updated files. Thanks Spawnie69 :smile:

I see what you mean. I fiddled with it a bit using Firebug, but without a full file compare I couldn't find the issue.

There is div somewhere on the page that is stretching past the edge. That then is pushing the container past the edge and allowing all elemnts with width 100% to also stretch.

On my test and production sites I have it working correctly so the default should be correct.

As an aside, I find styling this template to be rather difficult due to the reset.css file.