Hello,

I have set up a zentools module to pull featured articles in 4 columns. My customer, who has a screen resolution of 1280x1024 sees 3 columns with the fourth article wrapped to the next line. Here's the url: manfredmelcher.com/

I have set the module to maintain columns on smaller screens but it stills displays 3 columns with the fourth article wrapped on my customer's computer.

I have various computers and laptops in the office with different screen sizes and resolutions as well as ipads and phones and they all display either 4, 2 or 1 column and work fine. It's just my customer's computer that won't display 4 across.

I changed my screen resolution to match his and found this code in the templates CSS (Buildr):

zentools.min.css:1 @(min-wi...x) and (max-width: 1200px)
[grid-col~="1/4"] {
width: 3.33333333%;}

If I change it to 25% in developers tools, the columns resize and display 4 across. If I put the new css into my custom style sheet, it doesn't work.

The funny thing is, when I put my resolution back to 1920x1080 the code changes also, to:

[grid-col~="1/4"] {
width: 25%;
}

I added a class to the module (featured) but it didn't help me.

So I'm stumped. Any help would be greatly appreciated!

Joanne

Hi Joanne,

Are you looking at just one module?

I'm looking at the module with the first article being "Psychotherapy Helps"

If it's just this module try adding

@media (max-width: 1200px) and (min-width: 787px) {
#zentools-166 [grid-col~='1/4'] {width: 24.9%;}
}

You will need to split this word with a space

"separated/divorced" as it over extends

Cheers
Paul

Thanks, Paul. That did the trick!

Joanne

You're welcome

Cheers
Paul

Hi Again,

Earlier in this thread, you gave me the code to display 4 columns on my customer's 1280x1024 screen and it works great.

This is the url:
manfredmelcher.com/

This is the code you gave me:
@media (max-width: 1200px) and (min-width: 787px) {
#zentools-166 [grid-col~='1/4'] {width: 24.9%;}
}

I also have the same problem on the ipad/landscape. It doesn't collapse to 2 columns -- but stays at 3 with one wrapped.

I tried modifying your code to this...

@media (max-width: 1024px) and (min-width: 768px) {
#zentools-166 [grid-col~='1/2'] {width: 49.9%;}
}

...As well as trying every other number in between, but it nothing works.

Do you know what it should be? Am I even in the ballpark?

Thanks for any help,

Joanne

Hi Joanne,

Try adding this

@media (max-width: 1200px) and (min-width: 787px){
#zentools-166 [grid-col~='1/4']:not(.zt-no-collapse):nth-child(3n+1) {clear: none; }
}

Can you test on the ipad and the desktop to see if this works - it may break something

Cheers
Paul

Hi Paul,

I tried it and it seems to work perfectly. I wouldn't have tried that syntax! How do you do it? And what were you thinking it might break?

J

Hi J,

It's a case of working through the css using the web developer tools

With removing the clear I wasn't 100% sure how it would render on a phone

Cheers
Paul

Have a great weekend

Cheers
Paul

You too!

And thanks again.

You too