Search code examples
htmlcsswordpressw3-css

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


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/

website in live on web


Solution

  • 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;}