Header Apperance on Tablet Device
-
Hi everyone,
The site I need help with is : courtneybruettephotography.com
Theme: McKinleyThe 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!
CourtneyThe blog I need help with is: (visible only to logged in users)
-
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
-
See:
theme description http://theme.wordpress.com/themes/mckinley/
live demo site http://mckinleydemo.wordpress.com/ -
-
-
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. -
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 -
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; } -
You know, I’ll also offer this solution which you can try and see if one is better than the other.
#masthead { width: 100%; } -
-
-
-
That first code did the trick! :)
Thank you again for your help!
Have a great day :)
Courtney
-
- The topic ‘Header Apperance on Tablet Device’ is closed to new replies.