CSS Masonry images side by side Wordpress

[free-crochet-patterns]

Hello !

Hopefully there is a css writing expert here who has a good solution for my masonry Wordpress theme script.

The intention is to get two columns of images on small screens (such as a mobile phone) instead of one column (as it is standard in the theme).
So far I have the code below, but with this code I get irregular empty gabs between images (see photo).


This is the script:

@media (max-width: 767px) {
.page-fluid-width.sidebar-position-right.menu-position-top .index-isotope.v3 .item-isotope {    padding: 15px 5px !important;    float: left !important;     width: 49% !important;
}    .index-isotope.v3 article.pluto-post-box.format-quote .post-body {    padding: 15px!important;}
}

The link to my website is www.free-crochet-patterns.com

Any idea how I can make the images fit together nicely without big gaps? I would be sooo happy if this can be solved. Thanks a lot for helping me out.

Lisa

 

[LTomy]

Hi,
Welcome to CodeForum!

You could add the following properties to the parent element of the images:

display: flex;
flex-flow: row wrap;

 

[LTomy]

So, did you resolve your problem?

 

[free-crochet-patterns]

I am trying to find out how to find the parent element.

 

[free-crochet-patterns]

This is so much better. I changed my script this way:

@media (max-width: 767px) {
.page-fluid-width.sidebar-position-right.menu-position-top .index-isotope.v3 .item-isotope {    padding: 15px 5px !important;    float: left !important;    width: 49% !important;
            height: 325px !important;
            display: flex;
flex-flow: row wrap;}    .index-isotope.v3 article.pluto-post-box.format-quote .post-body {    padding: 15px!important;}
}

Thanks a lot!

 

[LTomy]

Good, glad that it worked!
If you plan on keeping to play with the CSS, learning a bit about it would be a good idea .

 

[free-crochet-patterns]

Yes it sure is. Thank you soooo much!

 

[LTomy]

You are welcome! Do not hesitate to come back when you need help!