Overlapping text and image

[forceofnaturecoach]

Hi there

I’m trying to create a title (with a coloured background) that overlaps an image.

I have made it pretty much the way I want by adding negative margins. See screenshot.

However, the title moves depending on the size of the window it is viewed in and on mobile it is off the left side of the screen. Is there a way to make the overlap fixed regardless of the window resizing?

This is what happens on mobile…

Thank you!

[nabeel]

Hi Hannah,

Thank you for reaching out to us. You probably can achieve this with the new Grid element, please see https://www.youtube.com/watch?v=PCiDTA-6-rw

The Grid element is available in Pro only (see https://theme.co/apex/forum/t/release-notes-pro-3-1-x-7-1-cornerstone-4-1/66681 and https://theme.co/changelog/), if you’re using X then you can achieve this with negative margins but this won’t work correctly in different screen sizes because you’ve two columns setup and in mobile screens the columns go fullwidth and the title will go down with it. To learn more about overlapping content you can checkout a video tutorial here https://www.youtube.com/watch?v=W5tnpn-x5K0

Hope this helps!

[forceofnaturecoach]

Hi Nabeel

Thank you for your reply - I thought that might be the case.

I don’t have Pro and I feel like it might be a little advanced for my skill level.

Is there a workaround you can think of to get a similar look? If I created an image file with the title overlapping could I get the body copy to still be in the same position, for example?

Thanks
Hannah

[friech]

Hi Hannah,

Honestly, negative margins are not recommended, but if there is no other way, let’s isolate it to desktop view so it does not break the mobile responsive view. To do this, you need to apply the margin via Element CSS area.

Simply paste the custom CSS below to your text element’s Element CSS area.

@media (min-width: 768px) {
	$el.x-text {
		margin-top: 50px;
		margin-left: -250px;
	}
}

Feel free to adjust those values.

Hope it helps,
Cheers!