Okay
  Public Ticket #1547675
"grid" portfolio layout not working as expected. Is there an ideal image size or aspect ratio?
Closed

Comments

  • rockmark started the conversation

    No matter what settings I use for the portfolio, the grid setting won't make even rows.  I have tried making all the original images the same height, and it made no difference.  I have turned on and off the 'full width' images, and still the image heights are not the same.  Note that I can't allow you to log in to the site, but I can screenshot anything you require.

  • rockmark replied

    I am okay with cutting off the top and bottom of images, if that is what is required.  You seem to have no problem with your demo images though.

  •  291
    Paul replied

    Hello,

    In this case, you might have to use the 'List' style with custom CSS instead of 'Flexible Grid'.

    Please select the List style and apply this custom CSS:

    .portfolio-item {
        float: left;
        margin: 0 1.5% 3%;
        width: 30%;
    }
    .portfolio-item img {
        height: auto;
    }
    

    The code will create a 3-column layout and looks like this: https://cl.ly/r35H

    I hope it helps.

    Regards,
    Paul

  • rockmark replied

    That is a fallback option, and thank you for that, but it doesn't directly address my question:  How did you make 'Grid' work in the demo?  Why do my images not work with your grid code?

  •  291
    Paul replied

    The theme uses a third-party script called jQuery flexImages plugin for generating the flexible grid layout when images have different dimension in a specific area. I am afraid it entirely depends on the script about how it calculates and creates the layout.

    Yes, as I also tested it here on my end with 600x800 portrait orientation images, trying to create equally 3-column layout, but it seemed the script failed to work right somehow. It oddly created different height images even most images actually had the same size.

    On our demo site, the images in each row have different dimension and it just worked nicely.

    That's why I previously proposed you a workaround in this case.