Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #21103

    Hi all,

    So my logo didn’t conform to the 200×100 dimensions (it’s actually 321×70) and when I uploaded it originally it wasn’t centered, so I searched on the forum about solutions and I found someone put something like this:

    h1.logo {

    top: 20px;

    }

    It looks great on my computer but when I tested it on my iPhone there’s a huge gap between the navigation and the logo.

    I’ve provided a screen shot here: http://s8.postimage.org/kaz4uegvp/photo.jpg

    Any advice as to how to make the logo look normal when viewing on mobile devices?

    Thanks so much.

    #110450

    Hi majesticllama,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    /* put your mobile specific css here */
    }

    Then add your logo css to the space I noted above and adjust the top: 20px to an amount that you like.

    Regards,

    Devin

    #110451

    Thank you Devin! What kind of mobile specific CSS should I put there? Can you give me an example for the logo I have? I’m sorry I don’t know much about CSS. Thanks!

    #110452

    This is what I put:

    /* All Mobile Sizes (devices and browser) */

    @media only screen and (max-width: 767px) {

    h1.logo {

    top: -20px;

    }

    }

    It doesn’t seem to work… I guess my question is how do you accommodate a different size logo in this theme usually?

    #110453

    It would be more like

    @media only screen and (max-width: 767px) {
    .responsive h1.logo { top: 15px;}
    }

    Regards,

    Devin

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Need help aligning logo when viewing on iPhone’ is closed to new replies.