Section background (via class) is now the lowest layer after theme update

[ArtOfSpring]

Hi there,

on my page: http://wordpress.lokbernau.de/
I defined .gradient class like this:

.gradient {
background: rgb(244,197,87);
background: -webkit-linear-gradient(rgba(30,30,30,0.0)65%, rgb(244,197,87));
background: -o-linear-gradient(rgba(30,30,30,0.0)65%, rgb(244,197,87));
background: -moz-linear-gradient(rgba(30,30,30,0.0)65%, rgb(244,197,87));
background: linear-gradient(rgba(30,30,30,0.0)65%, rgb(244,197,87));
}

It’s applied to the first section of the page and you can see it for a short moment if you reload the page.
It’s purpose is to improve the visibility of the text “HEIMSPIEL
LOK BERNAU VS. MTV HERZÖGE WOLFENBÜTTEL
5. Spieltag ProB Nord, 22.10.2017 | 17 Uhr | Erich-Wünsch-Halle”

It worked until the last theme update. Now it seems like the gradient background became the lowest background layer.
How do I get it back on top of the others - right behind the text?

Would it be possible to assign the class to the upper background layer?
In case yes, how could I achieve this?

[christian]

Hey @ArtOfSpring,

First, this is because the background setup now is contained within the section/row rather than applied directly to it so there is no way your gradient will be shown.

There are 2 possibilities to achieve this.

• You apply your gradient class to your Row, disable its Inner Container and apply percentage based side padding to it. Optionally, you can remove your Section’s top padding and apply it to your Row.

• Use CSS to apply the background image to your section. Please see this guide. Since this uses custom CSS though, issues arising from the use of this and enhancements would be outside the scope of our support.

Thanks.

[ArtOfSpring]

Hi @christian_y,

thanks for the work around!
The solution works. There’s just one more thing to achieve a clean design.
With what padding values can I achieve a content behaviour like in a row with inner container?
I want to achieve to have the text in that row always (all screen sizes) aligned to the text of rows with containers.

[nico]

Hi @ArtOfSpring,

Not sure of what you want to achieve. As I check your setup, I could see that it is looking great in all screen sizes. Screenshot for guide would help a lot.

Thank you so much.

[ArtOfSpring]

Hi @nico,

I need the row with no inner container to always have a distance (left & right) like a row with an inner container to have the texts of both rows aligned left.

[rad]

Hi there,

First, please remove the right and left padding on that column. Then please add this custom CSS as well,

    .gradient > .x-column {
        max-width: 1200px;
        width: 90%;
        margin: 0 auto !important;
        float: none !important;
    }

Thanks!

[ArtOfSpring]

Thank you @Rad works like a charm!

[jade]

You’re welcome.