If Category Logo Image Too Wide - Hides content in 'Category' view

If the ratio and subsequently the width of the Category Logo Image is too wide, it hides all ‘latest posts’ on the right when in Category view.

so don’t do that. :wink:

Yeah I’ve changed it now, but what’s the limit? :slight_smile:

There’s no guide or tooltip and it just breaks the homepage if I go over a magic width!

###Issue

Finding that if the image is too wide it breaks the Categories/Latest view on an iPad (and of course if the browser is shrunk as per the OP).

###Cause

So what happens is if the Category Logo Image that you upload is wider than 260px (when it displays) and the ratio of the image allows it to be over that, the Latest list wraps around to the bottom of the Categories list. This image is only being limited by height.

###Solution

The Category Logo Image is only being limited by height (max-height: 150px;), but if we limit it by width to 260px as well, we allow the iPad to show the Latest column right next to the Categories column.

//max width for category images in Category/Latest View to prevent wrapping of Latest
.category-logo {
    max-width: 260px;
}

I’ve only concluded this magic value of 260px on a regular iPad Air retina display - other tablets may need other values?

If you like big images for the category logo, can’t you do a :

.category-logo {
    float: none;
    max-width: 100%;
    display: block;
}

It would work as a banner and I think it would work with any tablet (I could try on my android tablet if you want)

3 Likes

Yeah that’s what I was trying to get to!

Looks great on the iPad.

I got so fixated with trying to figure out the ‘allowed’ number of pixels in the width I didn’t bother thinking rationally.

2 Likes

I cant find this other support topic we had that was about the wrapping of (sub)category images. With the new Discourse update, it’s all garbled now, because the text no longer wraps, see
e.g. Magazine - The Spaghetti Western Database Forum