Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   Fitting two equal width columns inside a 9-column wide area (http://forum.bytesforall.com/showthread.php?t=23262)

flyboy Aug 12, 2015 06:02 PM

Fitting two equal width columns inside a 9-column wide area
 
I got a weird layout I'm trying to fit into Montezuma, so I'm hoping to brainstorm some ways to pull this off.

The design uses 3 columns for a sidebar, and 9 for the loop:

The problem is that on the desktop view, the loop has two columns of posts (columns 4-12 on the picture above). And since 9 is not divisible by two, I'm scratching my head a little.

One of the ideas was to create an additional 2-colum custom grid, most likely percentage-based, and fit it inside the 9-column area. Then I could assign that to the desktop viewport alone.

But even with that solution, how do I float odd posts to the left and even to the right? (I checked the code and there are no odd/even classes applied to the post containers)

Any ideas?

juggledad Aug 13, 2015 04:57 AM

why not make the sidebar 4 or 2 columns?

CrouchingBruin Aug 14, 2015 03:33 PM

You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this:
Code:

.blog .hentry {
  width: 49%;
  float: left;
}
.blog .hentry:nth-child(odd)
{
  clear: both;
  margin-right: 2%;
}

@media only screen and (max-width: 480px) {
  .blog .hentry {
    width: 100%;
    float: none;
  }
}

The first rule sets the post entries to 49% wide, so it takes up half the space of the content div (I didn't make it 50% because I wanted to add a margin of 2% to the right of the left-hand posts). The second rule uses the odd keyword to make sure the posts on the left "clear" from the row above it, and adds a margin for spacing from the post next to it. The last rule resets the width to 100% around a cell phone size, so the posts aren't tiled anymore.

There's a demo page here.

flyboy Aug 15, 2015 04:15 PM

Quote:

Originally Posted by juggledad (Post 112710)
why not make the sidebar 4 or 2 columns?

I would but that's not what the client approved

Quote:

Originally Posted by CrouchingBruin (Post 112711)
You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this...

Awesome. I modified that somewhat to keep the images from bursting from their containers, and set the min-height for the containers themselves, so they line up nicely side-by-side. Lookin' great!

Thank you =)


All times are GMT -6. The time now is 09:30 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.