Mosiac(?) columns presents differently for anon viewer

Howdy all!
Long time no see!

Here are screen shots from my new lettering.com site.
I'm using plonetheme.business-casual and have changed nothing substantial in the theme at all.
However, Mosaic tiles are installed, and the theme base has been changed to 'mosaic' (in theme config panels) In fact I've tried it both ways, and it does not affect the problem.
The presentation for anonymous users is severely distorted, with the columns completely wrong, images in the right hand column at full-size instead of constrained, etc.
This does not seem to be browser specific.


I can't seem to find any reference or pointers to begin addressing this problem.

Thanks for hints or pointers!
Peter

Quick Fix add this to your CSS

.image-inline {
    width: 100%;
}

Hi Jan
Thanks very much for your hint.

When I add this class attribute in the browser debugger, it does the trick.
The debugger shows this class being defined in "default.css"
However, I don't see a "default.css" in the egg anywhere, or in the theme contents.
When I add the attribute to "business-casual.css" it does not seem to be considered, or perhaps not included, or perhaps overridden somewhere?, and the same problem shows up for anonymous.

I'll keep banging on it, but perhaps you've got some thoughts on why this would be different for logged in users?

Many thanks
Peter

OK. looks like that did it.
I added it to the "main.css" file in ./styles/ rather than in ./less/

Still mystified as to why the problem affects anonymous users only...

But it's working ok now!
Many thanks!
Peter

It might be better to use some slightly different css.

I prefer this:

img { max-width: 100% }

This CSS makes sure no images are wider than 100%. I dont think there is any reason to have any image wider than 100%.

Thanks Espen!

Plone Foundation Code of Conduct