topic Re: Cookie banner custom code for mobile in CMS Development

Cookie banner custom code for mobile

Marlene — Tue, 02 Oct 2018 06:53:01 GMT

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:

Thanks,

best regards

Marlene

Re: Cookie banner custom code for mobile

jennysowyrda — Wed, 03 Oct 2018 21:32:37 GMT

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

Re: Cookie banner custom code for mobile

Anton — Thu, 04 Oct 2018 06:58:42 GMT

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

Re: Cookie banner custom code for mobile

Marlene — Thu, 04 Oct 2018 08:21:30 GMT

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

Re: Cookie banner custom code for mobile

Marlene — Thu, 04 Oct 2018 08:22:40 GMT

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

Re: Cookie banner custom code for mobile

StephaneLM — Tue, 28 Jan 2025 15:01:21 GMT

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!