Home Community: Layout Problem

[WiWebs]

For some reason the layout of the Communities on the home page gets out of whack when I choose to display more than 4 communities (trying to display 8). The first row of 4 is fine, but the second row will only display 1, then the third row displays 3.
The thumbnail size is set to 245px x 245px…

Here’s the URL Website

Thanks

---

[Ginger Coolidge]

I would stick with the default size set in the communities widget (440 x 300) which is technically larger, but that is what the CSS is expecting that comes with the theme and go from there. You are correct in that if you enter multiples of 4 you will get multiple rows displayed.

https://my.winningagent.com/winning-agent-pro-theme-setup/#home-page

---

[WiWebs]

Okay Ginger, tried what you suggested but the problem still persists…

Any idea what else may be causing the issue?

Thanks

---

[WiWebs]

It appears to be a height issue.

When I use the default size 440 x 300 the 2nd row staggers 3 items to 3rd row.

When I use the thumbnail size 245 x 245 the 2nd row staggers 3 items to 3rd row.

When I use the feature-small size 340 x 140 the 2nd row populates correctly with all 4 images.

---

[WiWebs]

I believe I figured it out.

There was no height attribute set for the community entry, so I set it for the 245 x 245 thumbnail as follows and it works perfectly:

.home-communities .wap-community.entry {
	float: left;
	margin: 0 60px 30px 0;
	padding: 0;
	width: 240px;
	min-height: 280px;

}

Hope this helps someone else out who faces the same problem?

---

[Ginger Coolidge]

Hi there, thanks for sharing your findings, more info is always good for others! Glad you were able to get things working.

In the Winning Agent Pro sites I’ve installed, I haven’t had to edit the CSS when using the home-community image size. However, I have occasionally seen an odd placement of one or two images staggered. To correct, I’ve usually removed the communities widget and added it back which was worked.

---

[Author]

Posts