Hello, I have looked for settings to fix this issue and I am stuck, as you can see the zentools grid is showing the image way too large at the the smaller browser setting, I looked through the @media settings but could not see where to fix, I think it is an image 100% setting?
screencast.com/t/pvKuf7r4rrDM jandjjewelersocala.com/

This is the setting in the module where the zentool image fills 100% of the container

Try disabling the settings and see how it looks

Cheers
Paul

Hi Paul, thanks for your response, I did not see any reference/link in the post.

I had already disabled image fills 100% of container, sorry I did not specify that . It seems that using a grid layout the images will fill the screen size, once I start downsizing the browser to tablet size, until I reach a phone size (where the images then display in a grid again, instead of in a column) regardless. That's why I was thinking an @media setting needed to be changed.

So probably to get clearer images on a tablet I will need to upload high enough resolution images to display at 900 px (or wherever the break is), I don't remember the exact dimensions) Then the resize and crop will adjust for the other displays, like desktop?

Hi

Good point for the image sizing it looks like this

.category-list img {width: 100%;} is the line in question

Regarding image size I'd upload the one pic that is larger but is able to be reduced in size for the desktop to the same ratio as the size in the tablet / mobile

Cheers
Paul

That did it!! Hooray, now I need to figure out how to get my zentools slideshows to show up at the smallest setting, they are nice and responsive(at tablet size) until I hit the phone size, then they disappear.

And is there a setting to change zentools grid, now as soon as the window starts to get smaller it defaults to one across, even at the tablet setting size, that seems odd behavior because there is room for more at that width, now it just shows a nice image but lots of empty space next to each. At the phone size, 1 across is perfect. Thanks again so much!

For the slideshows -

I'd check the advanced tab of the slideshow modules to see if they have a hide class in there

for the grid -

Are we talking about the module we looked at above on the start of the thread?

Cheers
Paul

(Primary slideshow on home page) I have selected Resize images based on screen size, and checked in Advanced settings this is what I see, screencast.com/t/cKcuVEDlS

and yes the grid module (below slideshow on homepage) defaults to 1 across, once the screen size is downsized even a little bit is the same one I was having the image issue with. Now the images are sized great, but there is a lot of empty space next to them with the table size.

Thank you!

Sorry just to check we are talking about the layout responsive layout section?

The slideshow and other modules are set up as required?

Cheers
Paul

I have the slideshow set up to Resize images based on screen size, the slideshow shows great except for when the screen is shrunk to cell phone size, I don't know if I have all settings correct, I sent the screenshot of the Advanced screen, I did not see anything that specified "hide" there.

the other issue is the zentools grid which when screen is shrunk just a little bit, defaults to 1 image per row, leaving a lot of empty space.

Sorry for all the questions, my client thinks the site is not optimized for mobile because of these two issues (complaining in other words!)

Appreciate your help, again!

Sorry to clarify I'm talking about the widths assigned via the responsive layout section in the template admin layout tab

If you go in that section are the widths correct for mobile/small tablet?

Cheers
Paul

Image wise its not going to be straight forward

Its going to require a series of media queries targeting the 100% width and changing to a different width

The template is designed for the 100% width I would really look to work with the single image if possible

The image being surrounded by space is the bit above
.category-list img {width: 100%;}

Did you try using an initially larger dimension sized image?

YES! I clicked on Extra Small in Responsive Layout and it was Red, so I clicked the red link and it populated into the 12 columns and now the slideshow shows!! and I made .zentitle display:none in @media screen and (max-width: 750px)(because it was showing up huge and covering the image) . Whewww, thankyou again

now if I can get zentools grid to not defaultto 1 image per row when shrinking screen

I don't think this will be easy I would go down the 1 image option making it a better quality image route if possible

I will check if there is a simple way other wise you will need to put a fair amount of work in adding media queries

Cheers
Paul

ok, I will upload higher resolution images then choose Medium or Default for that setting in the Resize Options. Thanks again for allll your help!!

I did look at this but it got way complicated straight off the bat

Converting 100% widths to different width values and then resetting it back to 100% on mobiles

Not that pleasant

Cheers
Paul

I just looked at the website in a phone (until now I have been resizing the browser) and the toggle menu does not display at all, and the banner position is getting cut out by the module positions above, Android phone. Any clue how I should go about troubleshooting from this point, I only really know how to use firebug in a browser ( (and I thought I was done with the site yesterday, it looks great in a resized browser!) Thanks for any ideas jandjjewelersocala.com/

Hi

What phone are you using and what version of android?

With the resized browser at mobile width - I'm right in saying you don't see the same problems?

Cheers
Paul

Hi Paul, yes on the phone, no menu and banner is cut off at the top by logo module, Droid 4.4.4, maybe I should run an error check, it might be a missing div tag?

Validation Output: 12 Errors

Warning Line 229, Column 51: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

<div class="column grid_twelve">

✉
Error Line 416, Column 50: Element script must not have attribute charset unless attribute src is also specified.



✉
Warning Line 493, Column 39: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

<li class="grid_three element ">

✉
Error Line 504, Column 16: & did not start a character reference. (& probably should have been escaped as &.)

data-src481="jandjjewelersocala.com//media/mod_zentools/cac…

✉
Error Line 1021, Column 50: Element script must not have attribute charset unless attribute src is also specified.



✉
Error Line 1093, Column 27: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 104: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 120: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 137: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 160: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 179: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 198: No space between attributes.

<!-- SPOTLIGHT -->

✉
Error Line 1093, Column 386: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

<!-- SPOTLIGHT -->

Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element div:
Flow content.

Warning Line 1127, Column 41: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.

✉
Error Line 1251, Column 29: & did not start a character reference. (& probably should have been escaped as &.)

</html>

✉
Warning Line 1239, Column 34: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.