Designing Responsive Components in Design Studio

[former_member194504]

With the explosion of mobile devices and the increasing use of these devices for on-the-go analytics, it is really important to design responsive components. Here I have explained the use of CSS @Media Query on one of our custom add-on components – the GridBox – to make it responsive. Pl. note that some edits have been made to the original post, considering Mustafa’s comments.

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.

Desktop Window Maximized – 1024px

Desktop Window Resized – 768px

iPad – Landscape - 1024px

iPad – Portrait – 768px