How to make an image overlap

[logoglo]

Hi, wondering if you could help.

See here: https://ese-mas.com/nosotros/

If you scroll to the section under the header. Im trying to make the image overlap into the green area, is this possible?

Thanks.

[ruenel]

Hello @logoglo,

Thanks for writing in!

Do you want something like this?

Please do the following:
1.) Set a higher z-index value in your Row element settings:

2.) In your Image element, you can then set a negative bottom margin.

Kindly let us know how it goes.

[logoglo]

That’s got the image overlapping…worked perfect, however, I’m having issues now with responsivity. See below:

I have it look good on the large desktop, the image stays flush where it should, so the girl looks to be leaning over the section below. On smaller laptop screens, its being very strange. I have a separate section for the smaller devices, working half ok, but the girl isn’t staying flush like on the desktop. Any help help would be appreciated.

Thanks.

[ruenel]

Hello @logoglo,

You will need to have a separate settings for large screens and for the smaller screens. You can use the Responsive Element Styling so that you can assign different margins for different screen sizes. If you are not familiar with the Responsive Element Styling, please check this out first:

• Responsive Styling | Themeco Docs

Kindly let us know how it goes.

[logoglo]

Thanks, and how do I keep the image flush? Right now it moves up and down, and doesn’t look how I want it to, like she is on the top, leaning over…

[ruenel]

Hello @logoglo,

Your margins of the Image element are way off. This is why you image fly around the expected target line. Can you please provide us access to your site so that we can check your structure and element settings? You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[logoglo]

Thanks, login details in the secure form.

[logoglo]

I cant get it looking right on the smaller laptop size, I don’t know what to change to make it fit and look like the large size.

[marc_a]

Hey @logoglo,

To fix your desktop layout, you need to set the height of your column to auto instead of 100vh. Then adjust the margin bottom of your image something like -145px. It is advisable to use px than vh to achieve your layout. This is how it looks like on the desktop.

Hope that helps.

[logoglo]

On the large desktop its fine, I need the column that is containing everything to be 100vh as I am using scroll-snap. The issue remains on the small desktop, and the image is still moving all over the place on the mobile screens.

[ruenel]

Hello @logoglo,

I have inspected your element structures. I can say that because of the position of the girl in the image, using the percentage margin will not work. You will have to have a fix image dimension all through out the screen size so that you have the same fixed value for your margin. Check out the example URL in the secure note below.

Hope this makes sense.

[logoglo]

You are a life saver! I love you! thank you so much.

[marc_a]

Hey @logoglo,

We’re glad that my colleague was able to help you with your issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.