CSS Lesson #27: Arranging your Logo, Title and Close Button on Mobile

The header of the Cookie Banner can contain 3 elements:

  • A logo
  • A banner title
  • A close button 

As you can see in the image, the banner title is gone when you view the cookie banner on mobile. This is to make room for the other elements, by clearing the largest element; the text.

This also happens when you do not have a close button, and/or logo enabled. We will explain below how to rearrange the elements to get what you want.

Three options

  1. We will explain how to get the title back and move it to the left, with a close button. The logo will not remain.
  2. No close button, but a logo and title.
  3. Centering the title only. The logo and close button will be hidden.

1. Title and Close Button

 

Example

CSS

2. Title and Logo

Example

CSS

3. Title only

Example

CSS

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.