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.

CSS filename given in contibution.xml

CSS filename given in contibution.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.

Desktop window maximized - 1024px

Desktop window maximized – 1024px

 

Desktop window resized – 768px

Desktop window resized – 768px

 

Device Screen (iPad) – Landscape - 1024px

Device screen (iPad) – Landscape – 1024px

 

Device Screen (iPad) – Portrait – 768px

Device screen (iPad) – Portrait – 768px

 

Learn More

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com