Hello,

I'm having a problem with alignment on the tablet layout with the Nebula template. I've got 4 grids set up per row with a single item gallery in each grid - this works fine on wide and normal view, however when it switches to tablet view it's supposed to switch to a 2x2 layout but the second row of boxes are out of alignment and also stack on top of each other. Please see attached to see what I mean.

Any help and advice with this issue would be much appreciated.

Do you have a link for the page/site?

Thanks
Paul

Sure:

194.81.55.151

194.81.55.151/

Can you tell me the version number of the zentools module?

Thanks
Paul

Just in case

www.joomlabamboo.com/blog/how-to-joomla/how-to-find-a-version-number-of-an-extension-plugin-or-template

Can I just check is there a reason why you went with the 4 separate modules on the row rather than one module with one row of 4 grids?

Cheers
Paul

Hi Paul,
I initially created the layout with one module but had problems linking the boxes to the correct photos, which I think you previously gave me advice on but I couldn't get it to work.
If you can access the website hopefully you can see what I am trying to achieve. I need to link the boxes to specific images and pages within the site.. any advice?

Can you attach screenshots of the zentools settings for one of the modules - particularly the link behaviour and content being selected

Cheers
Paul

With the actual positioning

can you try this

@media (max-width: 979px) and (min-width: 768px) {
.home .row-fluid .span6 {width:100%; margin:0 0 30px 0;}
}

I'm forcing the span6 to be full width on the home page only

You may need to look at the image settings for different screen widths

I would suggest playing with the max width and mid width values depending on how it looks

You will need to add this snippet (called a media query) to the custom.css file

Cheers
Paul

Hi Paul,

Have tried the custom css as suggested but it doesn't seem to fix the problem.

Attached are screen grabs of the settings I have for the module

And here is a grab of the image settings:

Right ok - links first

You have the images set to load from a folder and using external links

This means the content type settings are defunct so you need to paste the url where it currently says 5 for it to work

Right ok - plan B

I think you would get more joy using module for each row but try

@media(max-width: 1000px) and (min-width: 750px) {
.home #grid1wrap .row-fluid [class*="span"] , .home #grid2wrap .row-fluid [class*="span"] {margin-left:0;}
}

Cheers
Paul

That's the ticket, thanks for your help Paul

No problem