Hi everyone,
On my Shopify store, the cookie banner looks fine, but I’m not sure about its size on mobile devices. Do you think it’s okay as it is, or should it be adjusted?
Thanks in advance for your feedback!
website
Hi @PeppePro02 ,
The screen shot you shared about cookies banner is looking good ,
but when I visited to your website cookies banner doesn’t appear.
thanks
Manoj
HI , try again now, you should be able to see it, as it was only showing in a few countries. Thx
ok I will check it now
Thanks, Manoj. So, do you advise me to leave it like this on the mobile version as well?
@PeppePro02 ,
In all versions cookies banner is looking very good, and the content is also describing about cookies policy. you should leave it like this .
Thanks
Manoj
Hey @PeppePro02
It’s quite big on mobile view and it’s not user-friendly so if you’d like to reduce it’s size on mobile then
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.shopify-pc__banner__body p {
font-size: 10px !important;
}
section#shopify-pc__banner {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.shopify-pc__banner__dialog button {
font-size: 11px !important;
}
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
@PeppePro02
The cookie banner is definitely taking up a bit too much space on mobile, which can impact user experience and product visibility.
If you’re looking to make it more compact and user-friendly on smaller screens, here’s a refined version of the CSS tweak you can add to your theme:
- Go to Online Store > Themes > Edit Code
- Open your theme.liquid file
- Scroll to the bottom and paste the following code just above the tag.
<style>
@media screen and (max-width: 767px) {
section#shopify-pc__banner {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.shopify-pc__banner__body p {
font-size: 10px !important;
line-height: 1.3;
}
.shopify-pc__banner__dialog button {
font-size: 11px !important;
padding: 6px 10px;
}
}
</style>
This will tighten up the spacing and reduce font/button sizes just enough to make it cleaner while keeping it readable and accessible
If you’d like me to personally help you implement or fine-tune it further, feel free to share a collaborator code. Also, if there’s any other Shopify-related issue, customization, or bug, just shoot me a message — happy to help out!
Best regards,
Rajat | Shopify Developer
Thx a lot ! Looks better now . Good job
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.