Important Note:

The following will work only for the Banner view design in the Banner layout section:

Add the custom CSS code:

In order to set the position of the Cookie banner in the middle of the screen, please paste the following CSS code in Consent banner tab > Design section > Custom CSS field, as shown HERE:

.cc-window {
    width: 100%!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center!important;
    padding: 0 25%!important;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0) !important;
}
.cc-window .cc-btn.cc-allow {
    min-width: 100px;
}
.cc-window.cc-close-icon .cookieconsent-wrapper, .cc-window.cc-close-icon .cookieconsent-wrapper {
    position: relative;
   }
.cookieconsent-wrapper {
    background: black; /* SET CONSENT BAR BACKGROUND COLOR HERE */
    border-radius: 5px;
    margin-right: 0px!important;
    padding: 20px 35px 20px 20px;
}
/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (max-width: 875px) {
div.cc-window {
    padding: 5%!important;
 }
}
 /* smartphones, Android phones, landscape iPhone */
@media (max-width: 400px) {
div.cc-window.cc-default .cc-compliance {
    flex-direction: column;
}
div.cc-window.cc-default .cc-compliance button {
    width: 100%;
    margin-bottom: 0.5em;
    margin-left: 0;
 }
}

Need help?

In case you need any assistance, please make sure to reach out to our support team via live chat or at support@consentmo.com

Updated on: 25/05/2025