Building responsive layouts

Considering the various screen sizes available today, we must build UIs that can adapt gracefully to any width and height. Sometimes it is possible to have one layout with rules on how that should change based on the width and height of the screen. Other times, we may need to build different layouts for big and small displays. In other words, layouts must be responsive.

There are different mechanisms to achieve layout responsiveness. One of the most popular available on both the web and mobile devices is the FlexBox. Its official documentation for browsers (web apps) is available here:

Flexbox - Learn web development | MDN

But there is also an interactive guide that makes it more fun to play with and understand the concepts behind FlexBox and the tools it provides, even for very complex UI layouts:

An Interactive Guide to Flexbox

Responsive Layout on the Platform

By clicking on these tabs you can select the size of the screen you want to make changes on the layout.

• Default : All the screens' sizes.

• XS : 0 - 599px

• S : 600 - 959px

• M : 960 - 1279px

• L : 1280 - 1919px

• XL : 1920px and up

1. Click the tab of the screen size you want to change properties of an element.

1. Select or type all properties you want to be different in this screen size.

See the differences on the layout by clicking on different tabs.

a.

b.