Header Apperance on Tablet Device

courtneybruettephoto · Member · Feb 12, 2014 at 10:02 pm
Copy link

Add topic to favorites
Hi everyone,

The site I need help with is : courtneybruettephotography.com
Theme: McKinley

The header length on my site appears perfect on computers/laptop and phones but when I go to look at it on the IPad, the header length appears really long so the whole site is shifted to the left side with an extra long blue line of a header going off to the right.

I have the Mobile Theme turned on.

I have tried going into the CSS and making it the same length as the menu beneath the header but it then appears to be too short on the computer/laptop.

What can I do to make the header appear in line with the menu on the tablet/IPad?

Any help is so appreciated.

Thanks!
Courtney

The blog I need help with is: (visible only to logged in users)
timethief · Member · Feb 12, 2014 at 10:15 pm
Copy link
I have the Mobile Theme turned on.

Disable it. It’s a completely different theme.

McKinley is a responsive layout theme. Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. Go to > Appearance > Mobile and disable the mobile theme
timethief · Member · Feb 12, 2014 at 10:17 pm
Copy link
See:
theme description http://theme.wordpress.com/themes/mckinley/
live demo site http://mckinleydemo.wordpress.com/
courtneybruettephoto · Member · Feb 12, 2014 at 11:13 pm
Copy link
I just turned off the Mobile Theme and do not see a change…
courtneybruettephoto · Member · Feb 12, 2014 at 11:14 pm
Copy link
Thank you for helping me :)
timethief · Member · Feb 12, 2014 at 11:15 pm
Copy link
See here http://www.responsinator.com/?url=http%3A%2F%2Fcourtneybruettephotography.com%2F
Are you okay then? I don’t help with CSS editing BTW so another Volunteer or Staff will have to assist you with it.
courtneybruettephoto · Member · Feb 13, 2014 at 1:49 am
Copy link
Wow that responsinator thing was really cool… I have never seen that before!

I really appreciate your help, thank you so much for taking time to help me.

If you think of anything else, please let me know!

Take care,
Courtney
thesacredpath · Member · Feb 13, 2014 at 9:45 pm
Copy link
Hi there Courtney, add the following to your custom CSS and then view on a tablet and phone and see what you think. It looks like it works much better.
```
#masthead {
	width: auto;
}
```
thesacredpath · Member · Feb 13, 2014 at 9:46 pm
Copy link
You know, I’ll also offer this solution which you can try and see if one is better than the other.
```
#masthead {
    width: 100%;
}
```
timethief · Member · Feb 13, 2014 at 9:51 pm
Copy link
Hi there thesacredpath – long time no email. ;)
thesacredpath · Member · Feb 13, 2014 at 9:52 pm
Copy link
Howdy timethief, yes, long time. We’ll have to fix that. :)
timethief · Member · Feb 13, 2014 at 9:54 pm
Copy link
LOL :)
courtneybruettephoto · Member · Feb 14, 2014 at 3:07 pm
Copy link
That first code did the trick! :)

Thank you again for your help!

Have a great day :)

Courtney
thesacredpath · Member · Feb 15, 2014 at 3:54 am
Copy link
You are welcome.

No items found.