Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Fitting two equal width columns inside a 9-column wide area


  #1  
Old Aug 12, 2015, 06:02 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
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?
  #2  
Old Aug 13, 2015, 04:57 AM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
why not make the sidebar 4 or 2 columns?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 14, 2015, 03:33 PM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Aug 14, 2015 at 03:38 PM.
  #4  
Old Aug 15, 2015, 04:15 PM
flyboy's Avatar
flyboy
 
115 posts · Sep 2010
Quote:
Originally Posted by juggledad
why not make the sidebar 4 or 2 columns?
I would but that's not what the client approved

Quote:
Originally Posted by CrouchingBruin
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 =)

Bookmarks

Tags
column width, grid layout

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Configuring a wide Right Column with Alternating full column and two-column New WordPress Fan Forum How-To 2 Aug 15, 2010 11:47 PM
How can I have my category widget display in two equal columns? barros1389 Page & Category Menu Bars 3 Nov 11, 2009 06:45 PM
[SOLVED] Page Menu Sub Menus of Equal Width Craig Mattice Page & Category Menu Bars 4 Jun 17, 2009 03:46 AM


All times are GMT -6. The time now is 08:36 AM.


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