CSS Breakpoints
When using default designs, the system will apply different breakpoints when switching between mobile, tablet and desktop. The breakpoints are:
Minimal
- Screen size below 321px width or 321px height
- Font size is adjusted to 0.38
- Line height is adjusted to 1.05em
- Padding of the box is reduced to 5px
- Screen size below 450x450: Box is resized to 100%100%
Mobile: Portrait
- Screen size below 480px width and 926px height
- Box width expanded to 100% and min-height of 300px
- Buttons are placed below content
- Logo is hidden
- Padding is reduced
- Additional: If screen size is below 414x736 or 736x414 (e.g. iPhone 6/7/8), the padding of the box is reduced
Mobile: Landscape
- Screen size below 926px width and 480px height
- Box width expanded to 100% and min-height of 150px
- Buttons are placed on the right side of the content with a width of 250px
- Logo is hidden
- Padding is reduced
- Additional: If screen size is below 414x736 or 736x414 (e.g. iPhone 6/7/8), the padding of the box is reduced
Desktop & Tablet
- Screen size above 926x480 or 480x926
Additional media queries
Layers positioned as "bottom/full width", "top/full width" and "Push down":
- Max-width 1500px: Content (headline, text & purposes) of the consent layer will be reduced to "100% - 450px" in order to display the buttons on the right side of the content.
- Max-width 1200px: Content (headline, text & purposes) of the consent layer will be reduced to "100% - 250px" in order to display the buttons on the right side of the content. This
- Max-width 800px: Content (headline, text & purposes) of the consent layer will be expanded to 100% in order to display the buttons below the content.
Layers positioned as "bottom/right", "bottom/center", "middle/center" and "top/center":
- Max-width 600px: Box is resized to 100% width.
Layers positioned as "middle/center":
- Max-height 600px and min-width 926px: Box is resized to full height and content is set to flex with overflow auto in order to prevent the box from being too high for the window.
Layers positioned as "right/full height" and "left/full height":
- Max-width 400px: Box is resized to 100% width.
Custom settings page:
