Want 3 column recent posts on Cafe Pro homepage

[webcami]

I'm trying to add a recent posts plug in to the 4th widget area on Cafe Pro and it clearly doesn't work. Does anyone know the coding changes I can make to have this widget recognize the recent posts widget and create a 3 column recent posts widget?

Do I need to register a new widget area? I know this is coded to recognize and adjust to the number of widgets.

Any help is GREATLY appreciated!

http://westseattlewordpress.com/skylar/

[Marcy]

You can try this:

.front-page-4 .featured-content .entry {
  width: 31.333333%;
  margin: 10px 1% 28px;
}

Try that to see if that's better for you.

---

Marcy | Amethyst Website Design | Twitter

[webcami]

Marcy, thanks... that made 1/2 the change. Any ideas on how to get it to now line up correctly?

http://westseattlewordpress.com/skylar/

Thanks again!

[Marcy]

Yes. It needs to be this:

.front-page-4 .featured-content .entry {
 display: inline-block;
 float: left;
vertical-align: top;
  width: 31.333333%;
  margin: 10px 1% 28px;
}

The vertical-align: top is only needed if it doesn't line up the way you want; you could also use bottom, instead of top.

And leaving out the other two lines was a total "space" on my part.

---

Marcy | Amethyst Website Design | Twitter

[Marcy]

This will give you a bit more "breathing room".

.front-page-4 .featured-content .entry {
  width: 29.333333%;
  margin: 10px 2% 28px;
  float: left;
  display: inline-block;
}

---

Marcy | Amethyst Website Design | Twitter

[webcami]

Once again a huge THANK YOU!
http://westseattlewordpress.com/skylar/

You can see this worked in getting it to line up (made a few minor tweaks)

However, I'm not at loss as to how to get the media queries for mobile adjustments. Any ideas?

[Marcy]

Add it to this section

@media only screen and (max-width: 960px) {

@media only screen and (max-width: 960px) {
   .front-page-4 .featured-content .entry {
       width: 100%;
       margin: 10px 0 28px;
   }
}

If you need it sooner, use

@media only screen and (max-width: 1024px) {
instead

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts