Handheld Stylesheet Functionality

A special stylesheet is provided in Perfect Layout that will reorganize and optimize pages automatically if the user is using a handheld browser. I've created a special demo page to demonstrate what a page will look like on a handheld browser.

Handheld Demo

---

Relevant HTML

<link rel="stylesheet" type="text/css" href="../resources/css/handheld.css" media="handheld" />

Relevant CSS

/*------------------------------------------------------------*/
/* Padding for each major section inside #page.               */
/*------------------------------------------------------------*/

.headerPadding
{
	padding:1em;
}

.contentPadding
{
	padding:1em;
}

.navigationPadding
{
	padding:1em 0.5em 1em 0.5em;
}

.footerPadding
{
	padding:1em;
}

/*------------------------------------------------------------*/
/* Make containers disappear and simplify the image display.  */
/*------------------------------------------------------------*/

.leftContainer, .rightContainer
{
	width:100%;
}

.leftContainer p, .rightContainer p
{
	display:none;
}

.leftContainer h3, .rightContainer h3
{
	display:none;
}

/*------------------------------------------------------------*/
/* Turn off dropdowns.                                        */
/*------------------------------------------------------------*/

#navigation .padding
{
	padding-top:1em;
	color:#fff;
	background:url(../images/highLines.png);
}

#navigationUL
{
	margin-left:1em;
}

#navigationUL li
{
	position:static;
	width:100%;
}

/* Styling the link areas. */
#navigationUL li a
{
	padding:0;
	font-size:1.1em;
	font-weight:normal;
	text-decoration:none;
	color:#fff;
}

#navigationUL li a:hover
{
	text-decoration:underline;
	background:none;
}

#navigationUL .noArrow a:hover
{
	text-decoration:underline;
	background:none;
}

/* Second and third level menu styles. */
#navigationUL ul
{
	margin:0;
	position:relative;
	top:0;     /* Forces top of sub-menu to display at the correct place. */
	left:auto; /* Forces sub-menu offscreen until the parent list item is hovered over. */
	list-style:none;
	background:none;
}

#navigation li li
{
	margin:0;
	width:100%;
}

#navigation li li a
{
	width:100%;
}

#navigationUL ul ul
{
	margin:0;
}

#navigationUL li:hover ul ul, #navigationUL li:hover ul ul ul, #navigationUL li.sfhover ul ul, #navigationUL li.sfhover ul ul ul
{
	left:auto;
}

#navigationUL li:hover ul, #navigationUL li li:hover ul, #navigationUL li li li:hover ul, #navigationUL li.sfhover ul, #navigationUL li li.sfhover ul, #navigationUL li li li.sfhover ul
{
	left:auto;
}

/* Add normal padding to non-dropdown components. */
#navigation .navigationPadding
{
	padding:1em 1em 0 1em;
	clear:both;
}

/*------------------------------------------------------------*/
/* Make forms thinner.                                        */
/*------------------------------------------------------------*/

.formElement
{
	clear:both;
	margin-left:0;
}

.moveOver
{
	padding-left:10px;
}

/*------------------------------------------------------------*/
/* Columns made to look like regular (verticle divisions).    */
/*------------------------------------------------------------*/

.half .leftColumn
{
	float:left;
	width:100%;
}

.half .rightColumn
{
	float:left;
	width:100%;
}

/*------------------------------------------------------------*/
/* Miscellaneous changes.                                     */
/*------------------------------------------------------------*/

/* Remove background images from Faux Columns. */
#midpage
{
	background:#fff;
}

/* Screen is too small to effectively justify text, so text is left aligned. */
.justify
{
	text-align:left;
}

/* Turn off hover effect in image galleries. */
.hoverbox a:hover .preview
{
	display:none;
}

---

« Back to Functionality Index