Modern Portfolio Alignment & Category Archive Link

[ljkeller]

I'm using the Genesis Featured Port widget for my Portfolio. I have it set to display 9 posts, and to show the category archive link on the bottom.

Currently, the 9 images will not align properly. If I set it to six, they are fine. But as soon as I go to 7 or higher, they are messed up.

Also, the link to view more from my portfolio shows up between the 2nd and 3rd post rather than on the bottom.

http://www.lizakeller.com

A little help would be much appreciated!

[Robin]

The posts themselves are fine, but the widget is built assuming that all the images, headlines, and content limits will be exactly the same height and number of lines, and when they're not, funky things will happen with the layout.

So, your sixth post's headline stretches to two lines, which makes it taller than #4 and #5, which messes up the third line altogether. But your seventh post also causes an issue because the image is shorter than the rest.

You can alleviate it by a bit of a hack if you add something like this to your CSS:

.featuredpost .category-portfolio {
height: 300px;
}

This would force all of the posts to be the same height no matter what their content is. I don't know if 300 is the magic number (in Chrome's inspector, it's working for me) and not sure how it will affect the responsiveness, but it's one way to tackle it. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[ljkeller]

Thank you so much! That solved the issue of the alignment.

Any idea how to force the category link below the featured posts?

[Robin]

It's probably part of the same issue, but you can make sure it will always go below by adding a clear property to the selector:

.more-from-category {
    clear: both;
}

---

I do the best I can with what I’ve got. (say hey on twitter)

[ljkeller]

Perfect! Thank you so much!

[Author]

Posts