Hey all,

Quick question .. I'm trying to tighten up the space between items in a 3 col grid.

Here's a link so you can see what I'm talking about - bit.ly/1opZqeS

Below the main slider is a 3 image/column grid. Ideally the overall width should remain as is, but the space between needs to be reduced by at least 50%

I've tried adjusting the left/right margins but that then pushes the outer edges beyond it's current width - so I'm a little stuck ...

Any thoughts or suggestions please

Hi

I'd try and increase the image size and try adjusting Item style > grid gutter in the theme tab

Cheers
Paul

Thanks Paul,

I've tried that but with no success ??

I've gone to Theme - changed CSS Handling to Custom, adjusted Item Padding, and Grid Gutter and also adjusted image size - yet no dice.

Yes, I did hit Create Custom CSS

I've checked no chache's are running and I've cleared my browser cache and changed browser ... still getting a 3% gutter - weird ...

Is it still set as custom css as I can't see a css file in the source code?

It looks like still set to master

Cheers
Paul

Thanks - yes I've just hit Create Custom CSS (again) and get "Custom file created for this module."

Hit Save & Close .. don't see any diff ?

I still can't see a css file being created - do you have an error in the browser console window?

I can see some styles added here

canvas.paulkellycreative.com.au/dal/templates/redsource-media/assets/css/style-b.css

although the relevant style is invalid so looks like a manual addition

Have you tried adjusting the image dimensions as well?

Cheers
Paul

Thanks Paul,


Yes I've added some manual styles to that stylesheet, mainly to get the hover over effect. I don't see any console errors however ?

As you say no custom css being generated either ?

FYI running latest Zentools2

Yes I'm expecting to see a css file with module id zentools-142

/media/mod_zentools2/css/custom/zentools-142.min.css - along these lines

However, I would try adjusting the image size to see if that gets the effect you are looking for

#zentools-142 .zentools [grid-col] {padding-left:1%; padding-right: 1%;}

is the invalid line I'm referring to you need to remove the space before .zentools

Is there any caching enabled on the site or server?

Ah ok .. well that did something .. moved the images closer together but now they "pop" out of the sides ..

Funny how I'm not getting a zentools-142.min.css generated ?

Have you tried making the image dimensions larger?

Hi Paul, yup doing that now however doesn't seem to make much difference .. despite using "exact resize" the images seem to make up their own minds as to size ..

Hi

Were you trying to enlarge bigger than the original size?

Looking at the site I think you may have changed direction with it

Cheers
Paul

The site looks very nice

I did notice on this page - its flickering

canvas.paulkellycreative.com.au/dal/cafe

Its a slideshow with one image - if you disable autoplay that should fix it

Cheers
Paul

Thanks Paul

Not really bigger than the original, as I have larger hi res images that I can upload, I just wanted to gutter to be smaller between images (zt-item) 1 & 2 and 2 & 3 such that it matched the spacing between it and the Zentools slide show above.

I've managed to get a solution with some rather nasty css, which does the job but wouldn't be how I'd like to go in future.

Oh FYI in the end I did get a zentoolsXXX.min.css generated however it overwrote some styling I'd set for the hover state of those items.

I guess it would be nice to have a cleaner theme in future where that hover over/reveal of the into/full text plus read more is possible.

Next I need to figure how how I can resize the zentools slideshow on that page (zentools-136) in mobile view, and if it's possible to put an image overlay between the images and the text ..
See hero image on bit.ly/1SM8Ig0

I guess tomorrow's task

"I guess it would be nice to have a cleaner theme in future where that hover over/reveal of the into/full text plus read more is possible."

Are you referring to the template or the module with this one?

With this page canvas.paulkellycreative.com.au/dal/cafe

I can see scroll bars on resizing but that relates to the module on the bottom of the page

zentools-142

Zentools and the template have some styling conflicts

I'd test by removing this style with media queries (targeting this module only)

.zt-grid ul {
margin-left: -3%;
margin-right: -3%;
}

Cheers
Paul