iPhone mobile viewing improvements to Frontier theme

Viewing 1 post (of 1 total)
  • Author
  • #4294

    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;}

Viewing 1 post (of 1 total)
  • The forum ‘Frontier’ is closed to new topics and replies.