How to fix the alignment issue of posts in this wordpress theme

Question

I am using w3school's w3css for this website and I have used the w3-col l6 m6 s12 for displaying the posts. It simply means that it will show 2 post side by side on large screen, same for the medium side display and only one covering all the 12 column on small screens.

But the posts are not aligning properly.

I tried adding the height property as auto but it's not working.

Check out this demo site that I have uploaded on my website so that you can see it in action.

http://wordpress.takshaksh.xyz/wp/

Answer 1

Please add below code in style.css

div.w3-row-padding {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

or add new class in w3-row-padding like col_wrap and apply below style

.col_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col_wrap:after,
.col_wrap:before { display:none;}

Answer 2

You can add this CSS your parent container on w3-col l6 m6 s12

.w3-row-padding{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }

Answer 3

您可以通过每<div class="w3-row-padding w3-row">只有2个项来解决这个问题。