Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #179851


    I’ve placed a fullwidth masonry gallery into my page with four columns – each of the 4 images acts as a gateway to their respective product pages. When the screen is at 1200px or under, the masonry elements fill the page without issue. However, once the screen resolution exceeds 1200px the masonry elements shrink, align to the left and leave a gap of around 600px to the right. I’ve attached screenshots to illustrate the problem. Is there any way to ensure the masonry elements/div is always centered on the page?

    If possible, I can send the URL and login details in a private reply – I cannot yet post the site details publicly as it’s still in development.

    Under 1200px:
    Above 1200px:

    Thanks for your help,



    Hey Iano999!

    It’s not happening for at least 1500px in width. Please try to add this on your custom.css or Quick CSS:

    @media only screen and (min-width: 1601px) {
    .av-masonry-container.isotope {
    margin-left: 10%;

    Please give us a link to the actual website.

    Best regards,

    This reply has been marked as private.


    The masonry grid is the incorrect item do the kind of layout you are looking for. It will always be full width and the item width is recalculated based on the screen size. So on larger sizes the small number of photos shown may not be enough to fill the screen,

    If you just want 4 columns with links then you can use 4 1/4 content elements with either an image or text element with the image+link inside.


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

The topic ‘Center Fullwidth Masonry Gallery’ is closed to new replies.