Two Columns Front Page CSS Customization

vlogazul · Member · Sep 11, 2014 at 9:07 am
Copy link

Add topic to favorites
Hello, i am using the forever theme and i would like to know if it’s possible or if there’s a snippet to make the posts on my main page be in a two column style and for the widget section to also appear as it is. Thanks

The blog I need help with is: (visible only to logged in users)
pcosta88 · Member · Sep 11, 2014 at 10:12 am
Copy link
Hello!

If I understand your correctly, you want some type of code that would apply to your entire theme and automatically divide your posts into 2 columns?
If that is correct, the short answer is no.

You can create columns and tables using HTML that divide up either posts or pages. However, it only applies to that page or post NOT to the entire theme.
You can create columns using HTML:
http://en.support.wordpress.com/advanced-html/#columns

You can also create HTML tables:
http://en.support.wordpress.com/advanced-html/#tables

If you are looking to do something similar with pictures, galleries work the best.
http://en.support.wordpress.com/images/gallery/

To apply a two column style for your entire theme you may need to change your theme.

http://theme.wordpress.com/themes/features/two-columns/
hallluke · Member · Sep 11, 2014 at 12:26 pm
Copy link
You could try something like this, try it out and let me know how it looks on your home page. You might want to set your number of posts on the home page to an even number so the 2 column grid fills up evenly.
```
.home .post {
  width:45%;
  float:left;
  margin:0 10px;
}

#nav-below {
  clear:both;
}
```
thesacredpath · Member · Sep 30, 2014 at 5:11 pm
Copy link
@vlogazul, in addition to the code @hallluke gave above, I would suggest adding the following to correct some positioning and spacing. As you will see, going to two columns is a little problematic on text alignment for posts that start with a word with not too many letters, such as “El”.
```
.home #content {
margin-top: 90px;
}
footer.entry-meta {
    margin-bottom: 30px;
}
```

No items found.