How to put cookies notification at the bottom for mobile?

[vhalili]

Good day, 

How to put cookies notification at the bottom for mobile? There's a Banner position option in the settings and I chose the "Bottom" option. It is working on desktop but it is not working on mobile, it is still showing at the top.

Any help?

Thank you!

Screenshots:

Cookie Banner Setting

Option Chosen

Mobile Screenshot

Phone Screenshot

Desktop Screenshot

Desktop Screenshot

[piersg · Accepted solution]

Hi @vhalili (thanks @JessicaH)

Add this css to your site footer HTML in your website settings:

<style>
@media (max-width: 768px) {
 #hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
 }
}
</style>

edit: Woops, I put <script> instead of <style>

[APermissions]

I would suggest just one minor change to this:

<style>
@media (max-width: 768px) {
 #hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
 }
}
</style>

[Freerk]

I needed to add top: unset to make it appear at the bottom of mobile screens.

<style>

@media screen and (max-width:768px) {

  #hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom {
    position: fixed;
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    width: 100%;
  }

}

</style>

[vhalili]

Thanks for this information! This solves the problem.

[JessicaH]

Hi @vhalili,

Thanks for reaching out.
I want to tag in some thought leaders to see if they can assist with this.
Hi @Chris-M @piersg @thesnappingdog , would you be able to share your thoughts?

Thanks,
Jess