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

Tagged: header image, Mobile Device

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

Author

Posts
August 5, 2013 at 2:45 am #107757 Resolve

Justin Bolger
Member

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

August 5, 2013 at 7:39 pm #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.
August 6, 2013 at 1:04 am #137842

Justin Bolger
Member

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!

August 6, 2013 at 9:54 pm #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;

}

}
```
August 19, 2013 at 6:31 pm #138548

Caroline Moore

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

September 3, 2013 at 6:29 pm #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

September 13, 2013 at 2:56 am #140069

Justin Bolger
Member

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

September 13, 2013 at 6:37 pm #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!
September 17, 2013 at 9:20 pm #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!

October 15, 2013 at 6:19 pm #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!
Author

Posts

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.