Banner visual issues

@eternalee8 can you share your domain so we can take a look? You may also email it if you don’t want to share it here (support(at)complianz.io).

There were some GDPR, WCAG and technical requirements we needed to resolve. The GDPR requirements are just legal stuff like for example “all buttons need to be the same size”. We’ve tried to move over as much of the current styling as possible, but we can’t always know the exact setup of each theme/site.

We’re happy to help you resolve this.

Aert has written an article about the minimal bottom banner, this may already resolve some of your issues:
https://complianz.io/css-lesson-19-the-minimal-bottom-banner-revisited/

It sounds as if there are some css conflicts between your theme and complianz. If we can look at your site we can probably find the cause of that quickly. If generic, we can patch this in the plugin. If specific, we can supply you with custom css.

– height: I’ll need to take a look at your banner, but it generally should take the height of the content.
– shadow: you can remove the shadow in the banner settings.
– Links: You can remove the links in the bottom of the banner by adding as custom css:

.cmplz-links .cmplz-link {display:none}

– font-size:

/* Cookie Message */
.cmplz-cookiebanner .cmplz-message {
    font-size:13px;
}
/* Category Title */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
font-size: 13px;
}
/* Buttons */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size: 13px;
}

Let me know if this helps, and if we can assist further.

Hey,

Thanks for the response and info. I have applied the CSS and it’s fixed some of the issues. The minimal bottom banner was especially useful. I have emailed you the domain in question for you to look at any issues. Subject title is my username.

Outstanding issues are as follows:-

1) How to align the cookie message text on banner on desktop so it is more in the centre like before?

2) On mobile now the minimal banner css is applied the bottom of the banner cuts off too soon and looks a bit strange, you can check the link I sent via email to see what I mean.

3) The banner on mobile and iPad/tablet is still positioned in the middle of the screen rather than bottom.

4) Is the new cookie message to do with GDPR compliance or will the old short message “We use cookies to optimise our website and our service.” be sufficient?

If you can also see if there is any conflicts with the complianz banner that is impacting funtionality please let me know, you can check on the website link I sent you via email.

Thanks kindly,

Hi @eternalee8,

Thank you for your reply.

I have checked our support inbox, but haven’t been able to find the message you mentioned in your post.

Would it be possible for you to resend it to: support(at)complianz.io, so we can look into this?

Kind regards,
Jarno

Hi there,

I resent the email for you, subject title is my username.

Thanks

– There seems to be a custom line-height of 35px in your custom css. Can you remove this?
– .cmplz-cookiebanner .cmplz-links.cmplz-documents has a display none, you can remove it, as the links within it are already hidden by .cmplz-links.cmplz-link display none; This should fix the bottom of the banner being cut off.

– To get the banner positioned at the bottom on mobile (we will also include this in the next update):

#cmplz-cookiebanner-container .cmplz-cookiebanner {
    transform: translateX(-50%);
    bottom:0;
}

– To align the text in the center:

.cmplz-cookiebanner .cmplz-message {
    margin: auto;
}

Let me know if this resolves the display issues for you.

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

Hi,
With regards to your question about the new default text on the banner: cookie banners must ensure that anyone visiting a site in the EU can make an informed choice about whether or not to accept the storing of information, or the gaining of access to information already stored, in the terminal equipment of a subscriber or user. That is only allowed (with some exceptions for functional purposes) on the condition that the subscriber or user concerned has given his or her consent, after having been provided with clear and comprehensive information.
Based on guidelines that have been issued recently by several data protection authorities in Europe, our legal team believes that the new default gives more (accurate) information to the visitors of your website. However, it remains up to you if you want to use that new text or change it into something completely different.

Hi,
Thanks for the details. Mathieu, thanks very much for the latest compliance information I will keep this in mind, appreciate it.

Roger, thanks for the information, I followed your instructions but have a few more issues which have appeared.

1) On desktop the banner is now over to the left hand side going off the screen. Instead of centralised, this was after using the mobile css.

2) I removed the line height but on mobile and tablets the banner has a height that is very high while the text and buttons remain at the bottom. You can see what I mean if you take a view at the website using devices on Chrome or Brave browser.

3) Also on iPad pro it goes off the screen to the left hand side like on desktop.

Any idea how to resolve this? Many thanks.

Can you change the css with the transform to

@media (max-width: 1023px ) {
  .cmplz-cookiebanner {
	transform: translateX(-50%);
	bottom: 0;
        top: initial;
  }
}

I think most issues should be fixed then.

Thanks a lot, that fixed the issues.

One small remaining issue, the manage consent box once agree or deny is selected. The text is seated at the bottom of the box rather than centralised in the middle of the box, also it no longer underlines when highlighted, is there a way to resolve this? Thanks very much.

Hi @eternalee8,

Glad to hear that! I think the following code should resolve the manage consent button layout:

#cmplz-manage-consent .cmplz-manage-consent {
    padding:0 15px;
}

#cmplz-manage-consent .cmplz-manage-consent:hover {
    text-decoration: underline;
}

Additionally, you can make the button smaller with

#cmplz-manage-consent .cmplz-manage-consent {
    height: 40px;
}