-
AuthorPosts
-
December 2, 2013 at 3:05 am #4294
Aaron
GuestThank 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;} -
AuthorPosts
- The forum ‘Frontier’ is closed to new topics and replies.