Complianz Margin on different websites & Capitals

Hi @cocosgalant,

I see the described behavior with the banner width and the uppercase text on the site “berta-tisowsky”, although couldn’t immediately find such issue(s) on the other attached sites. So let’s start with this one.

The uppercase text in the buttons occurs due to some CSS from your theme: it applies text-transform: uppercase for all button elements, and this rule is therefore applied to the Complianz buttons as well.

You can avoid this specifically for the Complianz buttons by adding the below CSS under Appearance > Customize > Additional CSS:

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    text-transform: none;
}

With regards to the width of the Cookie Banner message, the below CSS should do the trick.

@media (min-width: 768px) {
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-categories {
    width: 700px;
}
}

Applying both of the above rules will result in the below Cookie Banner:

Kind regards, Jarno

Hi Jarno,

thanks for the quick reply. I am not a big fan to increase the width of the banner to be honest. Does it have to do with the screen-size bc the CSS is addressing screens bigger than tablets? When I check the banner on the Complianz page it is smaller than the 700px and it’s not showing the margin on the right side when I open the preferences-drop down. The margins just stay the same.

The other issue is when you open the preferences the margin from the text to the buttons decreases for some reason so the text is too close to the buttons. How can I prevent that?

The first CSS for the button is not working, unfortunately. Not even with an ‘!important’ behind it. To be clear: I don’t mean the buttons in the banner but when you close the banner so you just see the button where you can open the whole banner again.

The other two pages show the same behaviour when you open the preferences button. The margin to the right appears and the text of the last one is to close to the buttons.

Thanks for your support!

Hi @cocosgalant,

The media/screen query was added so that these styles only apply for that specific viewport (a minimum width of 768px and above).

For the “Manage Consent” button, you can use the below CSS to reset the ‘text-transform: uppercase‘ property added by the theme.

#cmplz-manage-consent .cmplz-manage-consent {
    text-transform: none;
}

For the banner width on the remaining sites, you could use the same CSS as above to manually set the width for this viewport; or try the below instead.

@media (min-width: 768px) {
.cmplz-message, .cmplz-categories {
    width: calc(var(--cmplz_banner_width));
    }
}

Kind regards, Jarno

Hi!

And what about the right margin in the cookie document?

By default, is bigger than the left one and I’m not able to minimize it

Hi @smcloud,

You can adjust the max-width of the document with CSS. For example by using another value, or by using “unset”.

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

Kind regards, Jarno

Thanks jarnovos.

It doesn’t work for me. The section is full-width (as you can see in the photo), but the shortcode automatically puts this margin.

I tried in Appearence > Custom CSS and directly in the section and in the shorcode block… and nothing….

Hi @smcloud,

If you attach an URL to the page it concerns, that would allow me to tailor the CSS to your actual website; so that I can check if it has the intended effect.

Kind regards, Jarno

For sure! This is the website

Hi @smcloud,

You should be able to use the following CSS to override the max-width of the document:

.elementor-shortcode #cmplz-document.cmplz-document.cookie-statement { 
    max-width: unset; 
}

In the unlikely event that the above doesn’t work either, you could use the !important flag instead:

.cmplz-document { 
    max-width: unset!important; 
}

Kind regards, Jarno

worked!!

Thanks!!