# Cookie banner custom code for mobile

**URL:** <https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444>\
**Category:** CMS Development\
**Created:** [October 2, 2018, 6:53am UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444 "2018-10-02T06:53:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marlene](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marlene/32/18373_2.png) [@Marlene](https://community.hubspot.com/u/Marlene)\
**Post date:** [October 2, 2018, 6:53am UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/1 "2018-10-02T06:53:01Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/238ce98345c63b1c472124d29e13629ad1beffa1.png)

Screenshot 2:

 ![screenshot 2.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/4/b48c4fdd1bdf5f333200733c8c62449174b2a36d.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

---

<div class="post-metadata">

**Author:** ![Jenny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jenny/32/24_2.png) [@Jenny](https://community.hubspot.com/u/Jenny)\
**Post date:** [October 3, 2018, 9:32pm UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/2 "2018-10-03T21:32:37Z")

</div>

Hi @Marlene,

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

Have you take a look at the [media queries](https://litmus.com/blog/understanding-media-queries-in-html-email) for the page to ensure that all [browsers](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) are covered?

Thanks,  
Jenny

---

<div class="post-metadata">

**Author:** ![Marlene](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marlene/32/18373_2.png) [@Marlene](https://community.hubspot.com/u/Marlene)\
**Post date:** [October 4, 2018, 8:21am UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/3 "2018-10-04T08:21:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [October 4, 2018, 6:57am UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/4 "2018-10-04T06:57:54Z")

</div>

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

```auto
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  
 ![16x16_smiley-wink.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/550f65d2f3384e5c8911d89f2498aa3ac2203a21.png)  
)

regards,

Anton

---

<div class="post-metadata">

**Author:** ![Marlene](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marlene/32/18373_2.png) [@Marlene](https://community.hubspot.com/u/Marlene)\
**Post date:** [October 4, 2018, 8:22am UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/5 "2018-10-04T08:22:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![StephaneLM](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@StephaneLM](https://community.hubspot.com/u/StephaneLM)\
**Post date:** [January 28, 2025, 3:01pm UTC](https://community.hubspot.com/t/cookie-banner-custom-code-for-mobile/10444/6 "2025-01-28T15:01:21Z")

</div>

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](https://www.ketch.com/blog/posts/us-privacy-laws-2025) 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](https://www.ketch.com/blog/posts/consent-management) (CMP). You can start with [free CMP](https://www.ketch.com/ketch-free-cookie-banner) solutions first too that [work great for wordpress](https://www.ketch.com/blog/posts/how-to-add-cookie-banner-wordpress) . Hope this helps!