brushwoodnursery:
If that's the case, would it need to be specific to each template or could a general one be used for most zen installations? I'd prefer to preserve some of the feel of my store but don't want browser/device incompatibility either.
This is fairly generic:
/**
@media handheld {
html, body {font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;}
a:link, li a:link, a:visited, li a:visited {
background:none;
text-decoration: underline;
color: #0000CC;
}
a:hover, li a:hover, a:active, li a:active {
background:none;
text-decoration: underline;
color: #660066;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
#mainWrapper {margin:0;background:none;max-width: 480px;}
#headerWrapper {background-color: #ffffff;border:none;height:200px;}
.customerService{display:none;}
.freeShipping{display:none;}
#credentials{display:none;}
.date{display:none;}
#dropMenuWrapper{display:none;}
#navMainWrapper{border:none;}
#navMain {
float: none;
font-size: 1.1em;
line-height: normal;
}
#navMain ul {
margin:0;
padding:0;
list-style:none;
}
#navMain li {
display:block;
margin:0;
padding:0;
}
#navMain a, #navMain a span, #navMain .current a, #navMain .current a span {display:block;float:none;text-decoration: underline;color: #0000CC;background-image:none;text-align:left;}
#navMain a:hover, #navMain a:hover span {color:#ff0000;background-image:none;}
#navMain .contact, #navMain .account, #navMain .cart {display:none;}
#contentMainWrapper, #contentColumnMain {background-color: #ffffff;width:480px;float:none;}
.centerColumn {margin: 0;padding: 0;}
#footer{border:none;text-align:center;}
#siteinfoLegal {display: none;text-align:left;}
.messageStackWarning, #navMainSearch, #navCatTabsWrapper, #navEZPagesTop,
#navColumnOne, #navColumnTwo, #taglineWrapper, .navMainSearch, #navSuppWrapper, .banners, #navBreadCrumb { display: none;}
}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) {
html {-webkit-text-size-adjust: none;}
}
