Login

Book a demo
Start for free

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 450×450: 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 414×736 or 736×414 (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 414×736 or 736×414 (e.g. iPhone 6/7/8), the padding of the box is reduced

Desktop & Tablet

  • Screen size above 926×480 or 480×926

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:

  • Max-width 570px: Navigation is moved to the top in order to give enough space to the content

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!