CODEWITHSUNDEEP
htmlcsswordpressresponsive-designposts
user2075625
user2075625

Reputation: 103

How to split a wordpress blog page into a 2 column responsive layout?

I'm curious to know how you'd go about creating a 2 column layout for posts on a wordpress loop.

1 | 2

3 | 4

5 | 6

above is an example of how the blog page should look - however the posts aren't all going to be of equal height (which meant I couldn't simply use a css float rule - because the posts don't push up - e.g.

1 | 2

. | 2

3 | 4

I also am not keen on using the well documented masonry plugin, as I'm sure there must be a 'lighter' way to go about this.

To top it off I'd like these columns to be responsive to the browser screen width.

In which case they should fall into a pattern of

1

2

3

4

etc

Any suggestions would be great- thanks in advance

UPDATE

I have already tried placing the posts into pairs - this does respond nicely to a browser resize. However I have illustrated a problem below

Here the posts can sit evenly in 2 columns - however with posts of varying height - the following occurs :

enter image description here

Here's is what I'd prefer to happen - for the posts to stack underneath each other:

enter image description here

Upvotes: 0

Views: 1133

Answers (1)

G.Thompson
G.Thompson

Reputation: 827

So what you need to know is Modulo. http://en.wikipedia.org/wiki/Modulo_operation In it's simplest form is a great way to alternate rows etc. but is used in almost all programing languages. Here's an example of how you would do what you want to do...

$posts = array(1,2,3,4,5,6);

echo "<div class ='new_row'>";
for($i=0;$i<count($posts);$i++)
{
  if(($i % 2)==0){
   //create new post container
   echo "<div class = 'post'>"+$post[$i]+"</div>";
   //close row holding two posts
   echo "</div>"
   //start new row for next 2 posts
   echo "<div class ='new_row'>";
  }else{
      //create new post container
      echo "<div class = 'post'>"+$post[$i]+"</div>";
  }
}
echo "</div>";

Basically what happens is, we create the first row of 2 posts, it starts the loop, enters a post for the left then enters a post for the right, closes the row then opens a new row. You'd need to add a catch for the circumstance that the loop ends with an odd number.

Upvotes: 1

Related Questions