Spacing for AgentPress Listings on Home Page

[rebeccawilliamson]

Hello –

I am using the AgentPress listings widget with 6 listings. When I open the website on a 4:3, rectangular monitor, it shows 3 across two rows. But, the second row overlaps the first row and doesn’t have any separation. When I open my website on a square monitor with a more narrow width than my 4:3 monitor, the listings go to 1 per row and are spaced perfectly. Is there something I am doing wrong?

Here is the link to my site

http://www.austinluxuryliving.com/

Thanks!

---

[Ginger Coolidge]

Hi Rebecca,

Nothing you are doing wrong! The home listings section was styled to have one row of three listings but you can easily expand that to multiple rows of 3 across with a couple of small changes.

In your style.css file, first look for this entry:

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-listings .featured-listings .entry {
	float: left;
	margin-bottom: 0;
	margin-right: 60px;
	min-height: 140px;
	text-align: center;
	width: 340px;
}

What we want to change is the min-height number, but you want to separate this setting out to only effect the Featured Listings section. So add this below the section above:

.home-listings .featured-listings .entry {
	min-height: 240px;
	
}

You can adjust the 240px to your liking if you want more or less space in between the rows. One more step, you’ll need to change this in your @media (mobile) section for tablets that are landscape viewing. Find this section towards the bottom of your style.css file:

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

Under that you’ll see this entry:

	.home-listings .featured-listings .entry {
		min-height: 200px;
		overflow: hidden;
	}

Increase that 200px value to your liking, I found 220px to work well. That is it! Remember you can test all mobile devices in your browser but right+clicking and select Inspect Element.

Hope this helps!

---

[Author]

Posts