Rendering issue? z-index?

[pslangen]

Hi,

I’ve made a section (header) with a background image. In the section I’ve placed a content area element with a h1-tag. With some css I’ve created a background for the h1-tag (that is: the title). I have set the opacity of the background to 0.8.

It looks like this: https://www.best4kids-dehoeve.nl/openingstijden/

So far so good.

Thereafter I’ve added a media query for mobile.

The strange thing is: on my desktop everything works fine but when you go to a mobile phone and you open the page the background of the h1-tag is gone. You can only see the title and that’s it.

I tried to figure out what’s the problem but without success. I’m wondering, maybe it’s a z-index issue?

Can you help me out?

Thanks in advance.

Peter

[nabeel]

Hi Peter,

Thank you for reaching out to us. I checked your CSS code and I see you’ve given a wrong background color format to your headline. Please find this line of code:

    background-color: rgb(186,148,122,0.8);

And replace it with:

    background-color: rgba(186,148,122,0.8);

Don’t forget to clear all caches including your browser’s cache after making changes. Let us know how this goes!

[pslangen]

Hi Nabeel,

Thank you so much! I changed that particular line of code and now it works juist fine!
I was searching a needle in a haystack and could’t find it myself. This tiny change makes a big difference, thank you!!

Peter

[mldarshana]

Glad we were able to help