Center single image in 4-column row

Support
#1

Hello. At the bottom of http://dev1.thumbprintbooks.ca/grandfather-story I am creating a listing in X Pro of the other items we have in our portfolio. On displays 1200px or larger, I am organizing that listing in rows with 4 columns. Currently we have 13 items, which means the last item is by itself on the bottom row. However, I would like to center it. On the second to last row I have hidden the other three columns, so just the column with the image and caption is displayed and centered, but the image is larger. How can I center the single image in the second-to-last row, but keep its height the same as the image on the bottom row?

#2

Hi There,

You need to set the max-width of the image. But it can be a bit tricky considering the amount of screenwidths,

The Grid you are building manually could also be built with our Addons The Grid or Essential Grid

Look this example : https://theme-one.com/the-grid/brasilia/

Hope it helps

#3

Thanks. I was trying to avoid having to use another Addon, but have developed the portfolio listing with Essential Grid.

#4

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (min-width: 980px){
    li#eg-1-post-id-12 {
        left: 50% !important;
        right: auto !important;
        position: absolute;
        margin-left: -169px;
    }
}

Hope it helps :slight_smile:

#5

Thanks. I’ve opted to use Essential Grid for the portfolio listing on the site instead.

#6

If you need anything else please let us know.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.