transparency and text-align on mobile

[Max]

Hi there,

I am using the latest GP Premium and WordPress.

I know this is somewhat off topic but I would greatly appreciate your help with it – getting a response from the plugin’s author would probably take months and you guys are so knowledgeable that it might just take a few minutes. If it does not – I will let it go.

I am using a plugin (BC-DSGVO), to show a cookie notice, amongst other things.
I styled it using CSS. So far everything works fine – except for what it looks like on mobile.
Namely there are two issues (the rest of the changes I made work): In all of the mobile browsers I tested there is 1.) no transparency of the background colour (black) and 2.) the text is not centered. On desktop everything is fine. I already looked for possible solutions but the odd thing is the discrepancy between mobile and desktop (tested on android). Mobile view on desktop however, displays everything correctly.

This is the code I used:

.cc-window.cc-banner {
    text-align: center !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

Thank you and best wishes

[Leo]

Hi there,

I took a quick look and from the code standpoint, it should have transparency across all device:
https://www.screencast.com/t/JBmgRtRAg3bI

I’m not sure why it’s showing a solid color on mobile as well.

Can you try this CSS and see if it helps?

@media (max-width: 768px) {
    .cc-window.cc-banner {
        background-color: rgba(0, 0, 0, 0.7) !important;
        text-align: center !important;
    }
}

If not then you will need to take it to the plugin author unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Max]

Thank you for the quick response and suggestion.
I had already tried that – and again, unfortunately it did not work. I will contact the plugin developer.

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Max]

Ok it turns out that I had to use a different CSS class in order to make the whole thing transparent and centered on mobile as well. Now it works!

[Leo]

Glad you found a solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts