iPhone mobile viewing improvements to Frontier theme

Thank you RonAngelo for a great theme! To improve the Frontier theme on the iPhone and mobile, I have added various custom CSS via WordPress -> Frontier Options -> CSS. I can’t promise my CSS is optimal or to spec, but it seems to work in iPhone Safari, Windows 7 Google Chrome and except for logo replacement in Windows 7 IE 11. Below also my suggestion for putting spacing between paragraphs in blockquote. I hope you find it all helpful.

/* iPhone and mobile viewing — engages when window 480px or less, or browser says it is, such as also with iPhone retina display */
@media screen and (max-width:480px){

/* remove main body border to give more room and make look cleaner */
article { background-color: #F5F5F5; border: none; box-shadow: none; margin: 0; padding: 0;}

/* keep main menu buttons listing across instead of down and taking up much of the screen */
#header-logo {margin: auto;}
#nav-main {padding-left: auto;}
.nav-main {float: left; border: auto;}
.nav-main > li, .nav-main > ul > li {
float: left;
border-bottom: 0px solid #222;
border-left: auto;
border-right: auto;
}
.nav-main > li:last-child, .nav-main > ul > li:last-child {border-bottom: auto;}
#nav-top {
display: block;
float: left;
clear: both;
}
.nav-top {float: auto;}

/* make main menu more legible by changing font to black, removing shadow, reducing spacing slightly */
.nav-main li a {padding: 2px 6px 6px 6px; color: #000; text-shadow: none;}

/* Display an alternate version of the logo for mobile, such as more compact or bigger fonts */
/* CSS content property works with iPhone Safari and Chrome but seemingly not with Windows IE 11 */
#header-logo img {
content: url(“http://mobile-version-logo.jpg”);
background-repeat: no-repeat;
width: 640; /*or your image’s width*/
height: 80; /*or your image’s height*/
margin: 0;
padding: 0;
background-color: none;
}

/* Prevent extra spacing below logo and main menu when logo is scaled down by browser */
#header {min-height: 0px;}

/* Do not display top bar for mobile as it takes up too much space */
#top-bar {display: none;}

/* Do not indent blockquotes on left to give more space inside blockquote */
blockquote { margin: 20px 0px 20px 0px; }
}

/* Give spacing between paragraphs in blockquote */
blockquote p {margin-top: 10px !important; margin-bottom: 10px !important;}