Text disappears in the background

Hey beyond-flora,

Thank you for the inquiry.

Looks like there is a -80px margin applied to the column in the first grid row cell. Did you adjust the margin settings of the column element?

.responsive #top #wrap_all .flex_column.av-l0w6l5fo-7029c4706ecbe4ec050ef84b345d1ca7 {
    margin-top: 0px;
    margin-bottom: -80px;
}

Best regards,
Ismael

Hi,
Thank you for your patience and for the login, I couldn’t see your screenshot because it required a login, but I saw the first column and assumed that you wanted it centered over the background, so I removed the hr and changed the column’s negative top margin to a positive bottom margin and it seems centered now, please check.
If this is not what you wanted please upload your screenshot here or remove the login requirement from google drive.

Best regards,
Mike

Hi,

The layout of the cells or columns are now similar aside from the 100px bottom margin applied to the column in the first cell. Is that intentional?

#wrap_all .flex_column.av-l0w6l5fo-b220920a4a63c8fe0bc1fcf7779b0fb6 {
    margin-top: 0px;
    margin-bottom: 100px;
}

Would you mind providing a mockup of the section or a screenshot of how it is supposed to look?

UPDATE: I reviewed the thread above and found out that @mike actually added the bottom margin. A screenshot of the expected layout will help.

Best regards,
Ismael

Hi,
Thanks for the screenshot changing the negative bottom margin to a positive number corrects:

this is now the result:

please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.home #av-layout-grid-1 {
	z-index: 5;
}
#top.home #av_section_2 {
	z-index: 1;
}

the expected results:

Best regards,
Mike

Hi,
Glad to hear, if the layout was the same then you could use classes to achieve this, but your new page is not the same.
Are your additional pages going to use a grid element like the first page or a color section like this one?
On the first page the following element was a color section, on the new page it is two 1/2 columns, can you place these columns in a color section?

Best regards,
Mike

Hi,
Thank you for your patience, I found the solution a little more complicated because you are using the Sticky with curtain effect Footer Behavior, but by adding this custom class to the color section with the overlay columns: top-column-overlay-with-curtain-footer and this css:

#top.av-curtain-footer.av-curtain-activated #main > *:not(.av-curtain-footer-container) {
    z-index: 2;
}
#top.av-curtain-footer.av-curtain-activated #main > .top-column-overlay-with-curtain-footer  {
	z-index: 5;
}

Please note that the following color section should have it’s height set to at least 35% or 300px to allow for the column overlay.
I tested this on your homepage and /sunbeckia/
please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the link to your site, for your homepage aus Leidenschaft box I added this css:

#top.home.av-curtain-footer.av-curtain-activated #wrap_all #main #av_section_2,
#top.home.av-curtain-footer.av-curtain-activated #wrap_all #main #av_section_3 {
	z-index: 1;
	position: relative;
}

and it seems to be showing correctly now, please clear your browser cache and check.

Best regards,
Mike

Hi,
If the pages have the same layout, then you should be able to add a custom ID to the second and third color sections:
second
third
and then use this css:

#top.av-curtain-footer.av-curtain-activated #wrap_all #main #second,
#top.av-curtain-footer.av-curtain-activated #wrap_all #main #third {
	z-index: 1;
	position: relative;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please link to the “Sortiment” page, I didn’t find it in your pages or portfolio items.

Best regards,
Mike

Hi,
Thank you, I changed the color section ID’s to over & under and added this css:

#top.av-curtain-footer.av-curtain-activated #wrap_all #main #over {
	z-index: 2;
	position: relative;
}
#top.av-curtain-footer.av-curtain-activated #wrap_all #main #under {
	z-index: 1;
	position: relative;
}

the results:

You will need to adjust the placement of the box or make the height of the under section taller so the over box doesn’t cover the text.
Please adjust to suit, then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike