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


(James North) #1

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.


(Tobias Eigen) #2

so don’t do that. :wink:


(James North) #3

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!


(James North) #4

###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?


#5

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)


(James North) #6

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.