Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #431212

    Hi,

    I’m using the Masonry Gallery element on my homepage. I would like to have the Masonry element show up differently on mobile phones. As it is now it shows the Masonry photo’s screenwide all under each other. But because it’s a bit of a long scroll to get to other content this way I’m thinking this needs to change.

    Best I would like smaller thumbnails of the masonry photo’s to show. So maybe there can be shown 2 of them side by side. And then also maximize the amount shown and put in scroll buttons to show the next batch? Is this possible? I just want this on mobile phones. Tablet view is fine like it is.

    Regards,

    Erik

    #432118

    Hey erikvermeulen!

    Open up /enfold/css/shortcodes.css and around lines 2474 – 2508 you can see the code for changing their columns on smaller screens.

    On line 2494 you can see where it gets set to 100% width on screens 480px wide or smaller.

    @media only screen and (max-width: 480px){
    	.responsive #top .av-masonry-entry{width:100%;}
    }

    If you want to keep it at two columns then you could just delete that section so it stays on 50% width.

    Best regards,
    Elliott

    #432649
    This reply has been marked as private.
    #433257

    Hi!

    It this fixed? You can use the css code above to change the width of the masonry entry on mobile phone devices.

    Best regards,
    Ismael

    #433316
    This reply has been marked as private.
    #434254

    Hey!

    Yes you can change it to 50% if you want two columns on screens smaller than 480px.

    Regards,
    Elliott

    #435864

    Thanks, this resolved the issue!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Masonry Element on mobile devices’ is closed to new replies.