2 column mobile layout with blog masonry

Hi, I would like my blog masonry page to display 2 columns instead of stacked posts in mobile view. There are a few solutions on the web to find, but none of them seem to fix it accordingly. Either images are weirdly cropped or there are big white spaces inbetween post entries. 

I am calling on all the pros here in the forum and appreciate your efforts.

This is the code I have been using so far:

@media screen and (max-width:640px) {
.blog-masonry .entry {
    width: 48% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    height: auto !important;
}

.blog-masonry .blog-image-wrapper img{
    width: 100% !important;
    object-fit: contain !important;
}

.blog-masonry .entry:nth-child(odd) {
margin-right: 4%
}
}

Can you share your website URL and this page? 

Basic grid blog layout would be easier to adjust than the masonry.

On 9/14/2023 at 9:44 AM, Ziggy said:

Can you share your website URL and this page? 

Basic grid blog layout would be easier to adjust than the masonry.

Hi Ziggy, thanks for your help. I found a workaround so all good

On 9/14/2023 at 3:44 AM, Ziggy said:

Can you share your website URL and this page? 

Basic grid blog layout would be easier to adjust than the masonry.

I am trying to find a way to have my blog display 2 columns on mobile as well. I also have a masonry blog. My site is https://faceoflove.co/diary

8 minutes ago, nahlah said:

I am trying to find a way to have my blog display 2 columns on mobile as well. I also have a masonry blog. My site is https://faceoflove.co/diary

You can try this solution, but masonry layouts aren't as easy to control as grid layouts.

I used the code from this link but it didn't split the blog into 2 rows, the code from this page split it but it was not very neat