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 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #163188 Resolve

    slomomag

    Does the same answer apply to my site? Here’s the URL: slomoatl.com … thanks!

    #163196

    Kathryn P.
    Happiness Engineer

    Could you try cropping out the empty white space in the left and right areas of your header graphic and then add this custom CSS instead of what you have now:

    header hgroup {
      background-size: contain;
    }
    .custom-header {
      background-position: center;
    }
    
    @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;
      }
    }
    #163248

    Kathryn P.
    Happiness Engineer

    I’m marking this as resolved since it’s been a while since we’ve heard from you. If you need help with anything else, don’t hesitate to start a new thread.

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

You must be logged in to reply to this topic.