Resize and hide panels using CSS

[d_chang]

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:

.panelred

{

background-color:rgb(255,0,0);

position: relative;

bottom: 100px;

}

.panelblue

{

background-color:rgb(0,0,255);

}

@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.

Enjoy!