Can scroll Infinite on mobile

I get a scroll to top Arrow in left dow in mywebsite , and if you click to save preference in the right , you can click to the arrow and not in save preference.

Hi @r3qlzz,

Please change:

.cmplz-cookiebanner .cmplz-body {
    padding: 0 5% 100% 0;
}

to:

.cmplz-cookiebanner .cmplz-body {
    padding: 0 5% 1% 0;
}

The width on mobile is also a bit too wide, this is due to the change in having the button on a row, and a string like “Enregistrer les preferences”. You can shorten the wording to “Enregistrer” or some CSS:

@media only screen and (max-width: 768px)
.cmplz-cookiebanner .cmplz-buttons {
    font-size: 12px;
}

Hope this helps,
regards Aert

Hello Aert,

I did this changes but unfortunately nothing changes , i can scroll with my mobiles.
Also i can see the page behind the cookies banner…
With padding 1% i have a small empty in the top of logo its why i did 100%
.cmplz-cookiebanner .cmplz-body {
padding: 0 5% 100% 0;

For see whats happening you have to try with phone , because with firefox or other , the scroll infinite don’t appear , its with a real phone.

Hi @r3qlzz,

I forgot the media query;

@media only screen and (max-width: 385px) {
.cmplz-cookiebanner .cmplz-body {
    padding: 0 5% 1% 0;
}
}

Please clear all caching as well,

regards Aert

Hi Aert this is my code for mobile.

@media (max-width: 480px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block;
}
.cmplz-cookiebanner .cmplz-header {
grid-template-columns: 80px 1fr 50px;
}
.cmplz-close {
display:none;
}
.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 50px;
    width: inherit;
}
.cmplz-cookiebanner .cmplz-title {
    font-size:50px;
}
.cmplz-cookiebanner .cmplz-body {
    padding: 0 5% 1% 0;
}
}

I will send you a lot of screenshot i hope its can help.
In fact I have 3 wrongs things , the first is

– responsive doesn’t work very well.
– Click to preferences dont permit to go to the right side also we can’t read really the preferences cookies
– Can scroll behind the cookies banner .

Let me show you screenshot here.

Iphone8+
In this one , 2 arrow , the top get a big slot empty and the logo is pushed to the right , its will be better to position left like this title will be align center .

Iphone 8+ preferences
In this one we can’T go the right side for reading about policies.

Iphone SMALL

On this Mini Iphone i can’t go to the right …

Thank you …
Im trying to do it alone but hardly , i am keep going to search during waiting you.

Thank you

• This reply was modified 2 years, 11 months ago by r3qlzz.

Small up when you are available.
Thank you team

Hi @r3qlzz,

Had you already attempted the suggested lines of CSS with media queries? I couldn’t find those in your latest attached block of CSS.

Could you try the below CSS? This also reduces the font-size of the buttons on smaller screen sizes which should help. You can also try shortening the Preferences button text to “Enregistrer”.

@media only screen and (max-width: 445px) {
    .cmplz-cookiebanner .cmplz-body {
      padding: 0 5% 1% 0;
    }

  .cmplz-cookiebanner .cmplz-title {
    font-size: 55px;
  }
  
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 14px;
    }
}

Hope it helps!
Kind regards,
Jarno

Hello ! ??

Hope you are good.

@media only screen and (max-width: 480px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block; 
}
.cmplz-cookiebanner .cmplz-header {
grid-template-columns: 80px 1fr 50px;
}
.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 50px;
    width: inherit;
}
.cmplz-cookiebanner .cmplz-title {
    font-size:50px;
}

}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 14px;

The btn 14px did all the job.

What do this line :
.cmplz-cookiebanner .cmplz-header {
grid-template-columns: 80px 1fr 50px;

Yes I try this : `@media only screen and (max-width: 385px) {
.cmplz-cookiebanner .cmplz-body {
padding: 0 5% 1% 0;
}
}`

But i don’t know so much what is did …

Now i have just two problem see this screenshot.
iphone8+
Its not fullscreen ;
When I scroll inside cookies banner , its scroll behind , in the website.

Thank you . After that i just have to get button proper center like margin auto something like this i guess.

Hi @r3qlzz,

A quick solution for the scrollable Cookie banner message would be to adjust it’s line-height:

.cmplz-cookiebanner .cmplz-message {
    line-height: 20px;
}

And some additional padding on the buttons to center them:

@media only screen and (max-width: 480px) {
.cmplz-cookiebanner .cmplz-buttons {
    padding-left: 1em;
    }
}

Please find the example screenshot here.

Kind regards,
Jarno

• This reply was modified 2 years, 10 months ago by jarnovos.

Hello Jarno ,

@media only screen and (max-width: 480px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block; 
    justify-content: center;
}
.cmplz-cookiebanner .cmplz-header {
grid-template-columns: 80px 1fr 50px;
}
.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 100px;
    width:100%;
}
.cmplz-cookiebanner .cmplz-title {
    font-size:40px;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 15px;
      padding-left: 1em;
      
}
.cmplz-cookiebanner .cmplz-message {
    line-height: 20px;
}
}

I did what you said but unfortunately i still have the empty on the top.
EmptyTop on all phone

About the buttons , i don’t want padding-left: 1em; but space-around before the Accept button and Préférences button. I try but i don’t get it.

Yes i did the scroll filter and its work on desktop…
If we can have fullscreen , its already be better than nothing.

Edit : What is .cmplz-cookiebanner .cmplz-header {
grid-template-columns: 80px 1fr 50px;

Thank you , i’m sorry to disturb you a lot :$

• This reply was modified 2 years, 10 months ago by r3qlzz.

Hi @r3qlzz,

Please remove the previous “padding-left” I posted, as it doesn’t work exactly as I expected it to.

To change the gap between the buttons you can use ‘grid-gap’, and for a full-height banner you could set the height to ‘100vh’ on mobile screen sizes:

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

.cmplz-cookiebanner .cmplz-buttons {
    grid-gap: 30px;
}
    
.cmplz-cookiebanner {
    height: 100vh;
    align-items: start;
}

.cmplz-cookiebanner .cmplz-body {
        height: 100vh;
        margin-bottom: 10%;
}

Screenshot: https://i.snipboard.io/JetsSd.jpg

For an overview of the grid-template-columns property I can recommend this article: https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows

Kind regards,
Jarno

Hello ,
I did somes changes , now its ok I have finalky a fullscreen cookies.
Now i have to do it better for small phone and other responsiv design.

But i still have the problem than if i scroll inside cookies banner , i have my entiere site behind, we can see the scroll to top button and i can scroll to my footer…

Its like a z-index bug you have to do it with phone real ans not from computer to see this

Hello ,

I make a movies for you understand better my problem.
You can see that we can scroll inside the website during the fullscreen.
You can see the scroll to-top appear when I am to 30% in my page.

https://streamable.com/5iuysc

If I can scroll i think its about its not a fullscreen :
https://ibb.co/Btd9bTJ
https://ibb.co/v4H84gT
If you look to this paint , with LTBROWSER you can see its not really fullscreen.

@media only screen and (max-width: 700px) {
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block; 
    justify-content: center;
}

.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
    grid-gap: 30px;
    padding-left: 1em;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height:100px;
    width:100%;
}
.cmplz-cookiebanner .cmplz-title {
    font-size: 10vw;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 17px;
}
.cmplz-cookiebanner .cmplz-message {
    line-height: 20px;
    font-size: 20px;
}
.cmplz-cookiebanner {
    height: 100vh;
}

.cmplz-cookiebanner .cmplz-body {
     height: 100vh;
}
}

@media only screen and (max-width: 350px) and (min-width: 200px)  {
    
    
    .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 10px;
}

Thank you.

• This reply was modified 2 years, 10 months ago by r3qlzz.

Hi @r3qlzz,

I’ll make one from scratch, as we have done here with MU plugins as this is getting a bit complex to rework the CSS changes.

I’ll do this tomorrow,
regards Aert

• This reply was modified 2 years, 10 months ago by Aert Hulsebos.

Hello Aert ,

Do you need my help ?
I can create a user for you to my elementor website like you can test what you want from yourself.

I will give you my code like you can compare from scratch, and i can give you my text in the cookies banner.

TEXT

OrganiZ'Alpha.com utilise des cookies afin de vous faire vivre une expérience optimisée de notre site.

Ces cookies ont vocation à stocker et accéder à des informations personnelles, réaliser des statistiques et améliorer l'interactivité du site via les réseaux sociaux.En savoir plus

En cas de refus, certains services de notre site seront désactivés et votre expérience de navigation pourra être dégradée.

Nous conservons votre choix pendant 6 mois.Vous pourrez à tout moment changer d'avis et modifier vos préférences en cliquant sur la fenêtre "gérer mes cookies" en bas à droite de chaque page de notre site.

CODE

.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.62);
}

.cmplz-cookiebanner .cmplz-header {
    display: flex;
    justify-content: center;
}

.cmplz-cookiebanner .cmplz-body {
     justify-content: center;
     grid-column: span 3;
     font-family: 'Handlee';
}

.cmplz-cookiebanner .cmplz-buttons {
    grid-row-start: revert;
    grid-column-start: 1;
    margin:auto;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size:20px;
    font-family: 'Handlee';
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    background-color: #007976;
    color: #fff;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
    background-color: #007976;
    color: #fff;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
background-color: #B63355;
}
.cmplz-cookiebanner {
    grid-template-columns: 1fr;
}
.cmplz-cookiebanner .cmplz-message {
    text-align: center;
    line-height: 20px;
}
.cmplz-cookiebanner.cmplz-categories-type-view-preferences.cmplz-categories-visible .cmplz-buttons, 
.cmplz-cookiebanner.cmplz-categories-type-no.cmplz-categories-visible .cmplz-buttons {
    flex-direction: initial;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 200px;
    width: inherit;
    justify-content:center;
}
.cmplz-cookiebanner {
margin: 0px;
border-radius: 0px;
width: 100%;
}
.cmplz-cookiebanner .cmplz-title {
    font-size:60px;
    font-family: 'Arizonia';
    font-weight: bold;
    color:#B63355;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category  {
  background: white;
  border-bottom: 2px solid #B63355;
  font-size:20px;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
    font-family: 'Handlee';
    font-size: 12px;
    color: #082065;
}

#cmplz-document { 
max-width: unset; 
}

#cmplz-document h2 {
    font-size: 33px;
    font-family: 'Courgette';
    font-weight: bold;
    color:#007976;
    padding:50px 0 20px 0;
}
#cmplz-document .cmplz-subtitle {
    font-size: 25px;
    font-family: 'Courgette';
    font-weight: bold;
    color:#B63355;
}

#cmplz-document, #cmplz-document p, #cmplz-document span, #cmplz-document li {
    font-family: 'Handlee';
    font-size: 20px;
    color:#082065;
}
#cmplz-cookies-overview .cmplz-service-desc {
    font-family: 'Handlee';
    font-size: 20px;
    background: #F8F9FA;
    color:#082065;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div {
    background-color: #F8F9FA;
}

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
    font-family: 'Handlee';
    font-size: 20px;
    color:#082065;
}

@media only screen and (max-width: 700px) {
    
.cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block; 
    justify-content: center;
}

.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
    grid-gap: 30px;
    padding-left: 1em;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-logo img {
    max-height:100px;
    width:100%;
}
.cmplz-cookiebanner .cmplz-title {
    font-size: 10vw;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 17px;
}
.cmplz-cookiebanner .cmplz-message {
    
    font-size: 20px;
}
.cmplz-cookiebanner {
    height: 100vh;
   
}

.cmplz-cookiebanner .cmplz-body {
     height: 100vh;
}

}

@media only screen and (max-width: 349px) {
    
    
    .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
      font-size: 10px;
}
    
}

Im available on whattsap / here or MP if you need quick answer.

Thank you Aert