Inserting Archive Card element to a page (homepage)

Okay well elements are in place, although the archive cards now needs a bit of work to reach the same look as on the live domain landing page.

1. Color, right now the “Archive Cards” on live domain has grey background, with white background around the cards themselves. I understand that it’s not possible to set the “Query Loop” background to grey somehow or the grid under it? I’m not really seeing any options for that, the “Post Template” that comes after grid does let me choose a color but that already outlines the individual archive card container itself. https://imgur.com/a/4jdfnsn

2. Force it to 1×3 grid like on live domain, right now on live the following PHP does that, I just have to switch something with “homepage” here? Sorry I have 0 PHP experience

function custom_posts_per_page_for_blog( $query ) {
if ( $query->is_main_query() && $query->is_home() ) {
$query->set( ‘posts_per_page’, 3 );
$query->set( ‘no_found_rows’, true ); // Disable pagination calculation

// Set found_posts to 3 to eliminate pagination
global $wp_query;
$wp_query->found_posts = 3;
}
}
add_action( ‘pre_get_posts’, ‘custom_posts_per_page_for_blog’ );

Sorry for the late response, okay so posts is set to 3, but it shows 4. In addition to that, colors aren’t applying quite right, despite everything being nested in the added container it doesnt really apply the background color fully, and it’s also not stretching across.

Hm I don’t recall setting any sticky posts or anything like that. I set it to 2 for now, seems to look ok on front end.

Alright that did the trick with the background. Ok so I have this code that I kind of brute forced with GPT that makes sure everything is symmetrical and starts on the same line. It’s applied on staging too, but the excerpt doesn’t stop at line 3 like it does on live.

.gb-container.gb-container-6281de8b {
max-width: 400px; /* Adjust the max-width according to your preference */
overflow: hidden; /* Hide any content that exceeds the container */
}

.gb-container.gb-container-6281de8b h2 {
display: -webkit-box;
-webkit-line-clamp: 3; /* Adjust the number of lines to display */
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-width: 95%; /* Adjust the max-width according to your preference */
line-height: 1.5em; /* Adjust the line-height for spacing between lines */
}

Also, it seems to pull the latest article from way back in January? Where can I find what’s causing that?

Ahh okay, didn’t intend to sticky anything so was a mistake, thanks.

It does work for titles, I meant the excerpt, it doesn’t work for that but on live it does https://imgur.com/a/2oLcxuB

Sorry no, excerpt is still not limited to 3 lines, I would like to replicate what you can see on live domain right now. In essence, 3 things left for this one.

1. Limit excerpt to 3 lines (yes titles are fine, I mean the main text)
2. Space out containers between one another (right now there’s no gray space separating containers like you see on live)
3. Get rid of the white space below (I’m guessing this should sort itself out if excerpt are limited to 3 lines)

I also disabled sticky post but its still not pulling the completely latest article for some reason/

Edit: Ok I found the fix to number 2, I just need help with the number 1 + latest article then and should be done I think.

1. Ah ok, sorry I completely forgot how I did it on live since it’s been a while, thank you.

3. Height set to 100% but setting margin/padding just pushes the white space around currently.

How can I also find what is preventing the most latest article from being displayed in the archive cards? It starts from the second one currently