Isotopic Layout: items overlap on resizing window

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Isotopic Layout: items overlap on resizing window

This topic contains 2 replies, has 2 voices, and was last updated by  Federico 2 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #11276

    Federico
    Participant

    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

    #11283

    Ernest Marcinko
    Keymaster

    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 :)


    #11284

    Federico
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.