Isotopic Layout: items overlap on resizing window

[FedericoParticipant]

Hello!
I have a problem with the isotopic layout in Ajax Search Pro.
Basically, I just need to display post titles and use pagination, so I’m using 25px height for “Result height” and “1128px” for “Result width” (the full width of the div class=”results”) to show them in a column.
It works great, but when I resize the window to see how it works on smaller screens and if it’s responsive, the titles/items overlap and the results div height become progressively smaller (whether I put the pagination on bottom or on top).
If I change the parameter “Result width” to 282px (1128/4) to create 4 columns, the problem is much less visible, but still visible.
I tried to play with CSS but I can’t seem to be able to fix this.

Unfortunately I cannot provide FTP credentials because my provider doesn’t allow me to do so.
Here are the images. Thank you for your support!

desktop view: http://imgur.com/bcUzBFE
resized view: http://imgur.com/6Gblauy
asp options: http://imgur.com/wTNhuBq

[Ernest MarcinkoKeymaster]

Hi Federico,

I think the problem is originating from the way how the isotope script is trying to fit the items into the container. It changes the item height relatively to the change of the width, which I think is creating this overlay.

Luckily I think a min-width CSS property will do the trick, if set to the same as the original item height. Like so:

.isotopic .results .item {
    min-height: 25px;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[FedericoParticipant]

It works perfectly, thank you!
I was trying to save it in my theme’s stylesheet, then I saved it in the “Custom CSS” field in the plugin and read the instructions, and it worked.
Best regards,

Federico Diana

[Author]

Posts