How Do I Prevent My Header Image From Being Cut On Mobile Devices?

Home Forums Automattic Funki How Do I Prevent My Header Image From Being Cut On Mobile Devices?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #107757 Resolve

    Justin Bolger

    About two-thirds of my header image is cut off whenever my page is viewed from a mobile device. How can can I get my header to automatically resize when accessed from a phone or tablet?

    The blog I need help with is apexfan.com
    #137819

    Michelle

    Hi there,

    That is due to a design limitation of the Funki theme. Custom Headers are actually background images in Funki, and background images don’t resize automatically. We can work around this with some CSS magic. Give the following CSS a try:

    @media (max-width: 639px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: contain;
    height: 62px;
    }

    @media (max-width: 640px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: cover;
    height: 76px;
    }

    Let me know how this works for you.

    #137842

    Justin Bolger

    Thanks for pointing me in the right direction and letting me know I wasn’t crazy, at least. I’ve applied the CSS theme, but it still isn’t working. I’ve included a screenshot of the code applied to my page. Two red boxes with “X” appear. Is that why the code is unsuccessful? How do I change this/modify it? Thanks!

    #137923

    Michelle

    @theapexfan,

    I see that there is a formatting error in the code I gave you. It’s missing two curly braces. My apologies! Can you try this instead?

    @media (max-width: 639px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: contain;
    height: 62px;
    }
    }
    @media (max-width: 640px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: cover;
    height: 76px;
    }
    }

    #138548

    Caroline Moore

    Howdy! Just checking in. Did you have any luck with the above solution?

    #139408

    Michelle

    Hi there,

    I’m just checking in with you one last time. Are you all set or do you still need assistance?

    Cheers,

    Michelle

    #140069

    Justin Bolger

    Thanks, Michelle. I’m still having the same issue. Any other ideas?

    #140128

    Michelle

    Hi @theapexfan,

    I made a few tweaks to the code that I provided above. When I tested it on both my iPhone 4s and on my iPad, the header does not appear cut off. Can you give this CSS another try?

    header hgroup {
    background-size: contain;
    }

    @media (max-width: 639px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: contain;
    height: 62px;
    }
    }
    @media (max-width: 640px) {
    .site-header {
    min-height: 163px;
    }
    header hgroup {
    background-size: cover;
    height: 76px;
    }
    }

    If it doesn’t work for you, can you let us know which specific devices you’re using to test? Thank you!

    #140425

    Kathryn P.
    Happiness Engineer

    Hi there, did you have a chance to check out the most recent code? Please let me know if you’re all set or whether you still needed help with this issue. Thanks!

    #141625

    Kathryn P.
    Happiness Engineer

    Hi there, I’m going to close this thread since it’s been a while since we heard from you, but feel free to start a new one if you need further help. Thanks!

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

The topic ‘How Do I Prevent My Header Image From Being Cut On Mobile Devices?’ is closed to new replies.