Bring image in front of adjacent column (negative margins top and right)

[Adams]

Hello. On dev1.thumbprintbooks.ca, I would like the images with the letters “f” and “b” and “t” stacked in front of the columns adjacent to the right of those letters—similar to the letter “c” in the middle of the page. Is there a way to do that?

[thai]

Hi There,

Please add this custom CSS under X > Theme Options > CSS:

.el369.x-column,
.el290.x-column,
.el205.x-column,
.el119.x-column {
    z-index: 0;
}

Hope it helps

[Adams]

That worked great. THANK YOU!

[thai]

You’re welcome.

[Adams]

Hello. That solution worked yesterday morning and displayed that way on current versions of Firefox, Chrome, and Edge. But when I began editing the page this morning for devices, those letters (“f”, “b”, and “t”) again are stacked behind the adjacent columns on desktop screens. The “c” letter on the page appears as desired. The CSS code you provided is still in the global CSS area.

I’ve begun work on this design concept for devices, and the “f” for “Family Stories” is being displayed behind the text for Family Stories. I would like it to be stacked in front.

Any other ideas?

[thai]

Hi There,

I’ve added this custom CSS to X > Theme Options > CSS:

.z-index.x-column {
    z-index: 0;
}

Then add the z-index CSS class to the columns:

Everything is fine now.

Cheers!

[Adams]

Thank you!

[thai]

You’re welcome.

[Adams]

I’m applying this design to devices that are 767px or smaller. I have created a separate section for viewing on those devices — the section is labeled “Family-Devices.” In that section I have put the letter “f” in a separate row with a bottom margin of -10px, and the box of text for “Family Stories” is in the following row. Is there a way to have the row with the letter “f” be in front of the row with the box of text?

[christian]

Hey @Adams,

Bump the z-index of your row to 2.

Hope that helps.

[Adams]

Thank you. I really appreciate the support your team provides!

[christian]

You’re welcome, @Adams.