Div overlapping image consistently across different responsive sizes

[Racimo]

Hi I am using the gap element to create an overlapping effect as seen in the screenshot, and I have specified different margin sizes for each device.
For some reason, the overlap isn’t very consistent.
Sometimes it covers more of the image, and sometimes it doesn’t cover the image below.
Is there a better way to consistently accomplish this overlap?

The url is: valuemonitoringinc.com/about-us

Thank you so much,

Dan

[ruenel]

Hello Dan,

Thanks for writing in!

The overlap is inconsistent because of the height of the background image. If I am the one to set this up, I would separate the first row along with the section’s background image. And then the second section will have a negative top margin of at least 30 pixels so that it will consistent have to overlap with the image through out the different screen sizes. If you can provide me with your WP credentials, I would be happy to give you an example of how to do it.

Best Regards.

[Racimo]

Thank you RueNel,
Please see above.
Appreciative,
Dan

[ruenel]

Hello Dan,

I have logged in and duplicated your About Us page as an example. I created a section which serves as the image banner. I then added a negative 150px margin to the 2nd section so that it will overlap with the image banner section.

Please check out the test page here:

• http://valuemonitoringinc.com/an-x-test/

[Racimo]

Thank you for this!

I got it working great now.

Deeply appreciative,

Dan

[nabeel]

Glad it’s working now.

Cheers!