Agency Pro Home Middle – Space Between Entries

[KM]

Hello, I am using the Agency Pro theme and I am trying to add a space between the 3 entries in the Home Middle Widget. What I am trying to achieve is just like http://www.reinventingher.com/

Can someone help me to figure out how they achieved the spacing.

Thank you.

[daymobrew]

They have

.home-middle .featuredpost .entry {
  min-height: 342px;
}

[KM]

Thank you for the reply. That works for the vertical space between Home Middle and Home Bottom Widgets.

The space I am referring to is the horizontal spacing between the 3 entries in the first row. http://www.reinventingher.com/

Thank you again.

[daymobrew]

It looks like the width is reduced from 33.33334% to 30%

.agency-pro-home .featuredpost .entry {
  width: 30%;
}

It also has:

.featuredpost article:nth-child(3) {
  float: left !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
}

Can you post a link to the site that you are working on so that we can experiment with the CSS to give accurate answers for you.

[KM]

This reply has been marked as private.

[Bauhinia]

Hi, I'm wondering if anyone figured out how to do this? I would be interested in knowing this too please. Thank you.

[daymobrew]

@Bauhinia: Can you post a link to the site that you are working on so that we can experiment with the CSS to give accurate answers for you.

I don't know why KM's reply from May 29 is marked as Private. I cannot see it.

[spillitu]

I'm also hoping to create horizontal separation between the images in the home middle section of the agency pro theme, similar to http://www.reinventingher.com mentioned above. The site I'm working on is:Nhttp://www.orioncoherence.com

I would like to be able to see the starred background image between three middle images. Thank you.

[daymobrew]

I used Chrome Developer Tools to make virtual CSS changes so I cannot be 100% sure that they will work

The important changes are the width reduction from 33.333% to 30% and the margin-left/margin-right 5%.
In reinventingher.com it has nth-child(3) but that doesn't make sense as that would target the last element on the row. I changed it to nth-child(2) on your site and it worked.

.home-middle .featuredpost .entry {
  background: none; 
}
.agency-pro-home .content .widget {
  background: none;
}

.agency-pro-home .featuredpost .entry {
  width: 30%; /* Was 33.33333% */
}

.featuredpost article:nth-child(2) {  /* Was (2) */
  float: left !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
}

Add those to the bottom of the stylesheet or to the "Header or Footer Scripts" area in the Genesis area of the dashboard.

Screenshot: http://imgur.com/qnFnJkS

[spillitu]

Thank you very much daymobrew! I appreciate the time you took to look at it and propose a solution. It worked great!

[daymobrew]

You're welcome.

After the time it took, I'm glad it worked 🙂

[Author]

Posts