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

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

Author

Posts
May 29, 2015 at 5:20 pm #163188 Resolve

slomomag
Member

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

June 1, 2015 at 2:02 pm #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;
  }
}
```
July 16, 2015 at 2:03 pm #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.
Author

Posts

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

You must be logged in to reply to this topic.