Extend row to full height of post container

[btwholesale]

Hello there,

I have a post grid loading tagged content from three different sources: standard posts, and two custom post types. Different layouts are loading the different post types - these are each inside a row inside the post container. This is working ok.

In the standard posts, the row inside the post element is not extending fully vertically to fill the post container and is cutting off about 20px. On the frontend, the left hand image is cropped at the bottom and two of the other standard posts are also cropped.

Can you see why this is happening?

You will need to be logged in to see the page.

Please ignore the first item, the event, as this is a different post type and not affected.

Thanks a million!

Spencer

[btwholesale]

Hello there,

I have just added an additional custom post type and you can see the row problem clearly. I can see that it is due to the excerpt length, but cutting off still does not seem right.

This is at the 979px breakpoint:

This is the structure:

Do I need to remove the inner row? Row > Column 1 > Row

Thanks!

Spencer

[christian]

Hey Spencer,

Your Post element should be set to Flex Direction > Row and it’s Vertical should be Stretch. You then need to adjust elements inside it accordingly.

[btwholesale]

@christian,

Thanks for getting back to me - that sorted the problem

We would like to be able to hide the featured image on some of the posts appearing in the grid for visual variety. Please see items 6 and 7 in the attached image.

How would we ‘switch’ the image off for some posts but retain the same overall layout?

Cheers!

Spencer

[ruenel]

Hello Spencer,

You can create a condition for your featured image. It could be a custom field to turn ON/OFF the image or use the looper index number that in a certain number, the featured image is hidden away. As long as your container DIV element is using Flexbox, the layout should be retained.

Hope this helps.

[btwholesale]

Hi @ruenel,

Thanks for your reply.

I have added a True / False field to the posts - it is a checkbox and not a switch. Is that correct?

Also, I cannot see how to connect to this field via the Conditions.

Any help would be well received - thank you!

Regards,

Spencer

[ruenel]

Hello Paul,

Thanks for writing in!

You can use the String Condition like the figure shown below:

And then use the ACF dynamic content {{dc:acf:post_field field="hide_featured_image"}} like this:

Best Regards.

[btwholesale]

Hi @ruenel,

Thanks for getting back, and apologies for my slow response.

I have tried the above method with the checkbox active, but it does not hide the ‘disabled’ featured image, it removes all of the featured images. Do I need the first condition?

Kind Regards,

Spencer

[tristup]

Hi Paul,

The combination of these two conditions is the reason behind the problem. If the checkbox is selected, you don’t need to have the first condition.

Hope it helps.
Thanks