Framework

We’ve defined 3 breakpoints for our responsive corporate website:

• Mobile > 600px

• Tablet > 768px

• Desktop > 1024px

Each of our webpages is divided into a 12-column grid, which keeps our layouts uniform across different screen sizes.

Within each screen size, columns will dynamically grow wider or narrower, while the gutters and margins stay fixed. However, when changing between screen sizes, the gutters and margins also change width, so that elements don’t look too spaced out on small screens, or too close together on large screens. 

The grid uses set percentages, which decide how the web components are placed:

Desktop %:

• Full Width

• 100%, with 50%. 33% and 25% components (teasers).

• 80% left aligned

Tablet %:

• Full Width

• 100% with 50%. 33% components (teasers).

Mobile %:

• Full Width

• 100%