How to put cookies notification at the bottom for mobile?

SOLVE
New Contributor

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 ChosenOption Chosen

 

 

Mobile Screenshot

Phone ScreenshotPhone Screenshot

 

Desktop Screenshot

Desktop ScreenshotDesktop Screenshot

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Advisor

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>

View solution in original post

4 Replies 4
Community Manager

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 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, in dem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


Solution
Advisor

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>

View solution in original post

New Contributor

Thanks for this information! This solves the problem.

New Contributor

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>