With the explosion of mobile devices and the increasing use of these devices for on-the-go analytics, designing responsive components in SAP Design Studio has become really important. Here I have explained the use of CSS @media Query on one of our custom add-on components – the GridBox – to make it responsive.

Adding CSS

The code snippets given below are included in the CSS file shown in the image. This file name needs to be given in contribution.xml.

// Desktop Window Maximized

@media screen and (max-width:1024px) {
#GRIDBOX_1_control tr > *{
display: block;
}
#GRIDBOX_1_control tr {
width:100px;
display: table-cell;
}
#GRIDBOX_1_control td{
height:152px;
}
}

// Desktop Window Resized

@media screen and (max-width:768px) {
#GRIDBOX_1_control tr {
display: table-row;
}
#GRIDBOX_1_control td{
display: table-cell;
}
}

// Device Screen (iPad) – Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {
#GRIDBOX_1_control tr {
display: table-row;
}
#GRIDBOX_1_control td{
display: table-cell;
}
}

// Device Screen (iPad) – Portrait

@media (max-device-width: 768px) and (orientation: portrait) {
#GRIDBOX_1_control tr > *{
display: block;
}
#GRIDBOX_1_control tr {
width:100px;
display: table-cell;
}
#GRIDBOX_1_control td{
height:152px;
}
}

It is that simple ! The screenshots below clearly show how the component adapts nicely to different screen sizes.