WordPress.org

Ready to get started?Download WordPress

Forums

Expound
[resolved] Header doesn't display fully in mobile version (15 posts)

  1. dtsmash
    Member
    Posted 7 months ago #

    On the mobile version of my site (on my iPhone, at least), the header doesn't display fully - only the middle section of the image shows up.

  2. Konstantin Kovshenin
    Member
    Theme Author

    Posted 6 months ago #

    Right, the header will crop to fit the screen, which is why you shouldn't use it for a logo, just like in Twenty Thirteen. If you need a logo, you should add it to your site title via Custom CSS.

  3. dtsmash
    Member
    Posted 6 months ago #

    Right, thanks. Is there a support post somewhere explaining how to do that?

  4. Andrew
    Forum Moderator
    Posted 6 months ago #

    Let's see your website

  5. dtsmash
    Member
    Posted 6 months ago #

  6. Andrew
    Forum Moderator
    Posted 6 months ago #

    Do you know where the Custom CSS section is (assuming that it comes with your theme) ?

  7. Andrew
    Forum Moderator
    Posted 6 months ago #

    If you still have the header image set can you try adding this Custom CSS:

    .site-header .site-branding {
     background-size: 100%;
    }

    It's not great because you have a large white space in the header when the image resizes, but that's inevitable with your logo's dimensions.

    Maybe you can as well load a taller logo for your mobile?

  8. dtsmash
    Member
    Posted 6 months ago #

    There are two CSS files included in the theme: style.css and rtl.css

    I think the second one is something to do with adapting the theme for right-to-left languages...

  9. Andrew
    Forum Moderator
    Posted 6 months ago #

    If there's no apparent section of the dashboard called "Custom CSS" or similar then you may not have it - try installing this plugin: http://wordpress.org/plugins/custom-css-manager-plugin

    You can find its section of the dashboard to hold your CSS modifications: http://wordpress.org/plugins/custom-css-manager-plugin/screenshot-1.jpg?r=704634

  10. dtsmash
    Member
    Posted 6 months ago #

    Thanks, that worked - the whole logo now displays!

    One additional problem, though: there is now a lot of white space below the logo that is unnecessary. Any ideas for how to fix that?

  11. Andrew
    Forum Moderator
    Posted 6 months ago #

    Could you have just the first 2 characters of your logo on mobile and the rest on larger screens?
    E.g try this:

    .site-header .site-branding {
     background-size: 100%;
    }
    
    @media screen and (max-width: 420px) {
     .site-header .site-branding {
      background-image: url(http://snag.gy/lgY3k.jpg);
      background-size: 80%;
     }
    }
  12. dtsmash
    Member
    Posted 6 months ago #

    Inserted the new code, but it hasn't worked.

  13. Andrew
    Forum Moderator
    Posted 6 months ago #

    Try this instead:

    .site-header .site-branding {
     background-size: 100%;
    }
    
    @media screen and (max-width: 420px) {
     #masthead .site-branding {
      background-image: url(http://snag.gy/lgY3k.jpg);
      background-size: 80%;
      background-position: center;
     }
    }
  14. jschwabish
    Member
    Posted 6 months ago #

    Has this been resolved? I tried the approach Andrew described. My logo looks fine on mobile except for a lot of white space just below it before the nav bar. My site is http://www.policyviz.com.

    Thanks.

  15. dtsmash
    Member
    Posted 6 months ago #

    Yep, worked perfectly - thanks Andrew!

Reply

You must log in to post.

About this Theme

About this Topic

Tags