[[TOC]]

NOTE: Examples defined in this page come from ibm.com

Understand how many different views the template has. This is crucial to understand how many different configurations components might have. Normally it is just Desktop and Mobile, but depending on the case, others can be included:

• Wide-screen
• Desktop
• Tablet
• Mobile Landscape
• Mobile

These can be identified by looking into 2 places:

into different elements from the page, and start adjusting the screen. for example:

The following paragraph when you inspect it with the browser's inspector, it points to the following css properties:

This means that on the current window size, it triggers the configuration at 99rem of min-width, meaning that any size lower than the current will use these properties unless there is another configuration set at another window size that takes priority.

If we lower the size a bit we found the following properties, which means that there is another trigger set at 82rem.

This means we need to take into account these 2 limits, as well as any others.

We can also search for media queries in css files loaded by the website. Look for the following tag:

@Media

Disregarding the measure (rems, pixels), list out in order all the views. Default is set to desktop

Order	Max Size
1	1400px
2	Default
3	720px
4	400px

Some websites adopt a mobile-first development, meaning that you might find that instead of the max-width, min-width is set. In that case, the default size will be set for mobile.

Order	Min Size
1	99rem
2	82rem
3	66rem
4	42rem
5	Default