Skip to Content
Author's profile photo Dwain Chang

Resize and hide panels using CSS

Lets say you have created an application in design studio where you have a panel for your content (red) and a footer (blue). The content looks fine on a desktop screen, but when you run the application on an IPad, you want to hide the footer and re-size the content panel automatically to use the remaining screen space.


You can do this by simply creating the following CSS classes and adding these to the 2 panels in your application. Use the @media CSS feature to re-size the the red panel and hide the blue panel:




position: relative;

bottom: 100px;






@media screen and (max-height: 760px)


.panelblue {display:none }

.panelred {position: relative; bottom: 0px;


Assign the panelred class to the red content panel in design studio and set the width and height to auto.

Assign the panel blue class to the blue footer panel in design studio and initially set the height to 100.

When the height of the screen is less then 760px, the blue part will be hidden and the red part will be re-sized.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Does it work like html? The same way we apply classes in html?

      Author's profile photo Dwain Chang
      Dwain Chang
      Blog Post Author

      Hi Ankush,

      You define the classes in CSS, but you apply them to a Design Studio component in Design Studio itself