Cookie banner custom code for mobile

SOLVE
Marlene
Contributor | Platinum Partner

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 1.png

 

Screenshot 2:

screenshot 2.png

 

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Anton
Solution
Key Advisor | Diamond Partner

 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 Smiley Wink )

 

 

regards,

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

0 Upvotes
4 Replies 4
jennysowyrda
Community Manager

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

0 Upvotes
Marlene
Contributor | Platinum Partner

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

0 Upvotes
Anton
Solution
Key Advisor | Diamond Partner

 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 Smiley Wink )

 

 

regards,

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

0 Upvotes
Marlene
Contributor | Platinum Partner

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

0 Upvotes