Moving text and pinkish opaque background below image on mobile view

Site URL: https://anchoredhearts.ca/%C2%A0

Hi, I would like to move the text that is above my anchor image (I would like to move it together with the pinkish overlay background down below the image on mobile view) but it ends up like the third image that miso tasty posted 

I would like the same effect as this website (i.e. the way it appears on mobile): https://www.treehousetraumacentre.com/ 

Would appreciate help with the coding of CSS.

This is the website: https://anchoredhearts.ca/ 

Thanks in advance.

On 4/17/2022 at 2:43 AM, seapearl said:

Site URL: https://anchoredhearts.ca/%C2%A0

Hi, I would like to move the text that is above my anchor image (I would like to move it together with the pinkish overlay background down below the image on mobile view) but it ends up like the third image that miso tasty posted 

I would like the same effect as this website (i.e. the way it appears on mobile): https://www.treehousetraumacentre.com/ 

Would appreciate help with the coding of CSS.

This is the website: https://anchoredhearts.ca/ 

Thanks in advance.

Do you mean the same layout as this one?

yes, if you look at it on the mobile view, the white box and text goes below the background image. The code you gave me did not do the same thing - would you be able to help me with this? Thanks so much.