Div below image for breakpoints

[AshleyF]

I have confused myself a little with this one. I am trying to create something like this on the homepage to highlight a chosen post. The post image across full width with the title/excerpt within that as shown below.

It falls apart of course on small breakpoints where the white text box covers the image. So I was hoping to find a way to collapse that white text box under the image for smaller breakpoints. Is this doable?

I created that look with two columns, the text DIV inside the second right hand column. The image is a background image in the row. But I am not sure the best approach to create this.

[ruenel]

Hello Ashley,

Thanks for writing in! Please add a minimum height of at least 350 pixels in your first column so that when the columns collapsed, the second column will be a little lower showing you enough space for the image.

Hope this helps.

[AshleyF]

Thank you Ruenel.

I have gone down a different router with it using

instead of columns that collapse for the two smallest breakpoints.

For the mid range breakpoint the text DIV overlaps onto section 2 as below. Is there a way to automatically have that first section expand to the height of the overlap or is the only way to achieve this by setting a minimum height setting?

[ruenel]

Hello Ashley,

Because the DIV element is positioned as “Absolute”, you can only set a minimum height for the column setting.

Check your site now.