Standardizing size of recent posts shortcode

[giffc]

I want to bring recent blog posts to my home page and show 4 or 6. Unfortunately, even though my header images are all the same size, because the headlines are different lengths, the “cards” for each post are coming in at different sizes and really throwing off the design balance. Shifting to a vertical orientation just makes the images way too huge on big screens.

What I want is a responsive layout where every post “card” or “tile” is the same size and which shows 2 columns for wide screens and kicks into 1 column for narrow screens. This is pretty easy for me to do with CSS when I’m creating a static site, but I don’t know the best way to go about this using PRO (and I’ve defaulted to the integrity theme).

Please advise.

[ruenel]

Hello @Giffc,

Thanks for writing in!

The blog post items can be added in your homepage by adding a recent posts element to the page. You can display up to 4 items horizontally using this element. If you need to display 6, you will need to insert two recent posts element and make use of the offset option in the element settings.

Please set this up and provide us the url of your homepage so that we can check it and may help you in adjusting in to display in different screen sizes.

Best Regards.

[giffc]

Ah, so that’s what offset does. Thank you. I think I’ve got an adequate solution. Site is https://optionalityproject.com/

I added this custom css to the page:

@media (min-width: 768px) {
.x-recent-posts a.x-recent-post4 {
width: 46%;
margin-bottom: 4%;
}
}

[friech]

Hi Giffc,

@giffc

What I want is a responsive layout where every post “card” or “tile” is the same size

The Recent Posts element will always have the same size regardless of the feature images’ natural height. And the title has a text-overflow: ellipsis; property so it should not wrap in two lines.

@giffc

which shows 2 columns for wide screens and kicks into 1 column for narrow screens.

Please add this to Theme Options > CSS

@media (max-width: 767px) {
	.x-recent-posts a.x-recent-post2 {
		width: 100%;
		margin-right: 0;
	}
}

You can also try utilizing the Essential Grid Extension this plugin can display a responsive and beautiful Posts Grid.

Cheers!