Display two rows on blog page overview on mobile device

Hi,

Is it possible to show two rows on the blog page overview by mobile device?

website: https://www.studioswoop.nl/blog

Key: !UChtball0n
 

It doesn't appear that the password is correct, can you reshare that? Thanks!

Oh I see, password;  !Uchtball0n @Ziggy

Try this code from the linked post:

@media only screen and (max-width: 640px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 0.0px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
          width: 100%!important;
    }
}

Thanks for the reply @Ziggy, but this code changes te style of the Gallery.  I want to apply the two row view on the blog page masonry view, can you help to change the code?

Thanks

Sorry, try this code:

We are getting close @Ziggy!    Only the images aren't closing now.  Do you know if we can fix this with CSS?

The page only shows 1 across when I look at it, did you remove the code or is it simply not working?

I did remove it. excuse me for that ;).  If have put the code back on.

I wasn't able to look since your last message, assume you removed the code again?

I didn't save it yesterday, I have it on right now.

As you can see, on desktop I have the title shown in hover, on mobile it gets another position now and the images get a white border on top and bottom.

Try adding this:

@media screen and (max-width: 640px) {
  .blog-masonry .blog-image-wrapper img {
    height: auto !important;
  }
}

Thanks, getting really close, now we have the whitespace underneath

@media screen and (max-width: 640px) {
  .blog-masonry .image-wrapper {
    height: 48vw !important;
  }
}

It's so helpfull, now i have to deal with the smaller images;

Dear @Ziggy, do you think we can solve the thing above?   in that way can create a real masonry grid like my gallery (screenshot)

Thanks in advance