Overlapping Container

[texaskiwi13]

Hi,

I am circling back to a thread I opened a while ago and never resolved:

Best Practice for overlapping containers

Hi team, Attached is a screenshot of a homepage design I’ve mocked up. What is the best case practice for creating something like this so that it works well responsively? For example Is it best to use text margins, padding or something else to get the text to overlap the coloured text on the right? Or would I use the margin on the left column containers to push the entire container to overlap the right column color block? How do I get the block color to be full screen to the top and righ…

I did everything you outlined, but could not get the headline and text elements to overlap the blue container.

1. Is it best to use text margins, padding or something else to get the text to overlap the coloured text on the right? Or would I use the margin on the left column containers to push the entire container to overlap the right column color block? You said to use the fixed width option on the text element I tried all sort of number with the fixed width property and nothing changed on the site. As I saw no changes in desktop mode, I did not venture into the CSS media query for mobile.

2. I got this to work with your advice.

3. this worked. Thanks for this tip as this is something I struggle with regularly.

Can you please advise how I can achieve this? Thanks!!

[nabeel]

Hi Ashley,

Thank you for reaching out to us. We’ve a series of “Overlapping Content” videos on our YouTube channel. Here’s the one that is quite similar to your setup that you can follow https://youtu.be/3eNyEdMHAKg

You can also explore the other videos in this playlist.

Hope this helps!