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

[StephaneLM]

I know it's been a while but you can also look into other cookie banner solutions that are much simpler, and more complete that Hubspot's native solution. As you scale and grow your website, and with new legislations being passed in the US and around the globe, you will need a more robust solution to respect your users consent everywhere, called consent management platform (CMP). You can start with free CMP solutions first too that work great for wordpress . Hope this helps!

[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