Cookie banner view – tablet landscape orientation

Dear Ismael

thank you for the script. I changed the “max-width: 1024px” to 1200px, then the script works wonderfully for the tablet. The problem has already been solved.

However, I still have the problem with the cookie banner on my mobile phone that it is only partially displayed: see screenshot: https://www.osmosis.de/support%20/cookie/mobile.jpg
The solution with the widening of the window does not work here.
But there is still space at the bottom of the cookie banner: Would it be possible to align the cookie banner for the mobile phone at the very bottom of the website – without any gap (margin or padding)?
On the other hand, I would like to set the font size to 10px for the mobile phone only. But I’m not sure how to set the width information here, so that this is only set to the font size 10px on the mobile phone:
Maybe somehow like this: – ??? -:
@media only screen and (max-width: 767px) {
#top .av-toggle-switch .toggle-label-content {
font-size: 10px! important;
font-weight: lighter! important;
}
}

Do you have a solution here?
Thank you for your editing!
Many greetings Diana

Hello Ismael,

many thanks for the answer. First of all, the question about the resolution of the mobile phone: it is: 1080 x 2400 pixels (405 ppi)

1. Now I have added your suggested scripts to the Hotel Admiral website (https://hotel-admiral.de/) under CSS – unfortunately this does not change the display on the mobile phone. I also discovered that the problem only exists in the Chrome browser of the mobile phone, in Firefox the cookie banner is zoomed correctly. Here are the screenshots for viewing:
View mobile phone – Chrome browser: https://www.osmosis.de/support%20/cookie/admiral_Chrome.jpg
Mobile phone view – Firefox: https://www.osmosis.de/support%20/cookie/admiral_Firefox.jpg
As I said, the script doesn’t work yet for a better view in the Chrome browser. How could you still solve the issue for the Chrome browser?

2. I have the same cookie settings (under CSS and under “Extended Styling”) on another website (https://design.osmosis.de/) which I have also built on ENFOLD (like all my sites;)) specified as on the website of the Hotel Admiral (https://hotel-admiral.de/). Everything is displayed correctly on the desktop and tablet. Only again on the mobile phone do I have the same problem as described in point 1 and also the issue that the writing on the mobile phone on the page https://design.osmosis.de/ is not left-aligned, although I do defined in CSS.
Same theme, same script and yet different view? I am a little at a loss as to how I can force a left-aligned display for the page https://design.osmosis.de/ on my mobile phone. Here are the screenshots for the page https://design.osmosis.de/:
View mobile phone – Chrome browser: https://www.osmosis.de/support%20/cookie/osmosis_Chrome.jpg
Mobile phone view – Firefox: https://www.osmosis.de/support%20/cookie/osmosis_Firefox.jpg

Thank you for your editing. Many greetings Diana

Hello,
I changed the max-width value from 479px to 1080px and further mord disabled Performance > File Compression settings .
But unfortunately nothing changed.
In addition, I still have the problem of the wrong alignment of the font, as described in point 2 above.

I’ve now looked at it on another mobile device in Google Chrome: the same problem appears here as well.
What more could I do?

Best regards Diana

Again briefly to point 1: I have tried a little bit here and found out the following:
the script already works when you set the mx-width to 480px (with the value 1080 you have the problem that it is displayed over the entire width on the tablet)
In addition, I was now able to integrate a script to regulate the line height into the code, so the text is shortened by a bit and the legibility on the mobile phone is even better.
Here is the script I’m using now:

@media only screen and (max-width: 480px) {
.responsive .avia-cookiemessage-top-left, .responsive .avia-cookiemessage-bottom-left, .responsive .avia-cookiemessage-top-right, .responsive .avia-cookiemessage-bottom-right {
        width: 90%! important;
left: 5%! important;
right: auto! important;
bottom: 20px! important;
}
.avia_cookie_text {
line-height: 21px! important;
}
}

Nevertheless, I still need a solution for point 2 (see previous post)

Kind regards, Diana