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/

score 2 · Accepted Answer · answered May 16 '19 at 10:51

2

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

answered May 16 '19 at 10:51

chintan

311
1
8

Thank you so much. It's fixed now. I never expected that fast solution delivery. Can you tell me what the above properties are doing !! – Takshak Rajput May 16 '19 at 11:01
you are welcome, above property is new in css for display elements. if you use " bootstrap 4 " framework for css than above properties already in that. – chintan May 16 '19 at 11:12

score 1 · Answer 2 · answered May 16 '19 at 10:51

1

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

answered May 16 '19 at 10:51

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 3 · answered May 16 '19 at 10:48

0

You can fix this by only having 2 items per <div class="w3-row-padding w3-row">.

answered May 16 '19 at 10:48

tgrobinson

233
3
15

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

3 Answers3