CSS Lesson #24: Minimize your Banner on Mobile

We will use the default banner of Complianz to create a minimal approach for the mobile view of the cookie banner. We have done this before by minimizing padding for the entire cookie banner. Below we will rearrange the stacked buttons for another approach.

Default Mobile View

This is the Mobile View of the default banner on a new iPhone.

An easy way to minimize the height of a banner is setting the stacked buttons from columns (vertical) to rows (horizontal)

				
					/* From Stacked to Inline */

@media (max-width: 768px) {
.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
}
}
				
			

Inline Buttons Mobile View

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.