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

    Hey,

    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: http://cl.ly/S71y
    Above 1200px: http://cl.ly/S6aL

    Thanks for your help,

    Graeme

    #180529

    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,
    Ismael

    #182411
    This reply has been marked as private.
    #183239

    Hi!

    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.

    Regards,
    Devin

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

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