Cookie banner custom code for mobile

[Marlene]

Hi, 

I have a problem with our cookie banner. I have add some custom code in the Website-Footer-HTML because we need a special design. On google chrome desktop it looks fine (screenshot 1) bute on safari desktop and on mobile (chrome and safari) I only see a white backround and a white font (screenshot 2). Only the link and the CTA is correct. How can I fix this for safari desktop and for mobile?

Screenshot 1:

Screenshot 2:

Code:

<style>
div#hs-eu-cookie-confirmation.can-use-gradients {
background-image: linear-gradient(to right, rgba(0, 0, 0) 50%, rgba(120, 120, 120) 0%)!important;
border-bottom: none;
box-shadow: none;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
background-image: linear-gradient(to right, rgba(0, 0, 0) 0%, rgba(120, 120, 120) 100%)!important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a {
color: #e30421!important;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
color: #ffffff!important;
border-radius: 0px;
}
div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner p {
font-family: sans-serif!important;
color: #ffffff!important;
font-weight: bold!important;
}
</style>

Thanks,

best regards

Marlene

[Anton · Accepted solution]

 Hi @Marlene

it's because of different "browser frameworks". Not each browser works and maps the (s)css the same.

Simply replace every 

background-image: linear-gradient(to right, rgba(0, 0, 0) 50%, rgba(120, 120, 120) 0%)!important;

with

background: rgba(0,0,0,1);
background: -moz-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%) !important;
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(120,120,120,1))) !important;
background: -webkit-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%) !important;
background: -o-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%) !important;
background: -ms-linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%) !important;
background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(120,120,120,1) 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#787878', GradientType=1 ) !important;

with this it should look in every possible browser(maybe IE 10 and older will still loook sh**ty, but nobody should use this browser anyway  )

regards,

Anton

[Marlene]

Hi Anton,

thank you very much for your help. This webkit based code was the solution. Now it works in safari, and on mobile too. 

Thanks,

Marlene

[jennysowyrda]

Hi @Marlene,

Can you please share a link to the page you are working on? 

Have you take a look at the media queries for the page to ensure that all browsers are covered? 

Thanks,
Jenny

[Marlene]

Hi Jenny,

thank you for the links. They are very helpful. I really had to use a webkit based code, which Anton wrotes in his answer above too.  

Thanks,

Marlene