How can I stretch post slider content to the same height?

When displaying content in a post slider, a common issue is that the length of your dynamically inserted content may vary and thus the individual posts in your slider have different heights. If you want to display several posts next to each other and want to stretch them to the same height, this is the way to do it:

  • Wrap the query in a column
  • Use the option "stretch elements to same height" in the advanced block settings of your column block. You can even make that breakpoint-related.

Backend screenshot of the tiles section

  • Use a stack or group in your Dynamic Template
    • With the alignment option "space between" you can make sure that the elements get aligned accordingly

Backend screenshot highlighting the outer

    • In this example, you can use the width and aspect ration of the dynamic image to have more control over the height

    • The outer element (in this case a row) should use "stretch to fill" option

Backend screenshot highlighting the outer

That way the posts in your post slider will all have the same height on all screen sizes even if the content length varies.

Frontend result with several tiles - all with the same height, even though some tiles have more text content than others

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us