r3qlzz

Hello Aert ,
Thank you for your answers .

Exactly what I would to get at the end .
But some trouble appears .
1) The 100vh give this to me.
iphone8+
Maybe have less margin logo > text will me better i don’t know yet.

2 )If I scroll by accident its will show me this :
scrolled

3) For preferences , its ok but its cut the start of the logo
Cut logo

4) If I scroll accidently again the same things happen :
scroll preference

Thank you for your help ??

Hello Leon,

Exactly what i want !

Thank you.

Hello team,
I think you don’t understand me cuz of my english…

Also I make a movies , you can see when you scrolldown , the cookies banner is not really fullscreen , even width 100% so how to make it fullscreen on mobile ?
If we can’t make it 100% fullscreen cuz of mobile , OK lets go something like 80% fullscreen can be beautiful too.

For the blur effect , im already on lock scroll with your lesson but i guess it doesn’t work with mobile , so ok i can make blur only for mobile if its possible to get the other possibilities on desktop.

Now when you see my movies you can see two things when i click on preferences :
Blues border when i click somewhere or when i check case i don’t know if its normal or its cookies banner settings.

When you see the movies , you can see i can scroll down , we also see my scroll to top appear , sooo the cookies banner is not z-index 99999 , even if i put it on my settings css.

I don’t find a good solution im lost and its why im questioning you about this .
The banner from Aert , when the link was available , got the same problem than mine when i check it.

Maybe like you said its about javascript but I hope you have one for me than i can test…

video1
video2

On this picture you can see 2 scroll bar , the scroll bar for the entire site , so when we scroll you see the scroll to top appear , and the other on bottom , its the scroll bar for cookies banner.
2scrollbar

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

Hello ,
Can you ask me if you have new info about my problem ?
Do you have finish my cookies banner from scratch ?
If its impossible to have fullscreen work , its ok we can doing a not full screen its ok if its so complicate i can do without this.

But the most important I don’t want people scroll in the page before accept it

Hi aert ,

Also on this one isn’t fullscreen , we can scroll in the page.

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

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, 6 months ago by r3qlzz.

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 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, 7 months ago by r3qlzz.

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.

Small up when you are available.
Thank you team

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, 7 months ago by r3qlzz.

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.

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.

Hello ,

On this screenshot you can see my problem .
You have to zoom a litte …

cookies1
cookies2

Can you take a look of my code ?
I do a lot of code so can you read all of this ?
Maybe i did something wrong like one order about something and after 50 line i call a code who overwrite something …

Here i try to say if you can read my code ?
Maybe i say something two times for the same things …

Thank you.