Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brandon Brigham
3,716 PointsMy header becomes fixed on iPads only and is fine on all other devices and screen sizes
Hello,
If you visit my site I'm working on @ http://villa-terrazza.com/2014NewSite it looks fine.
The problem is if viewing on an iPad. When viewed on an iPad the header becomes fixed and so when you scroll down the header is following down the page.
Any ideas why it is like this only on the iPad?
The site is built on WordPress and is a customized version of the twentyfourteen theme.
Thanks for any help
2 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsI think its caused by this code in the twentyfourteen/style.css file:
/* Fixed Header */
.masthead-fixed .site-header {
position: fixed;
top: 0;
}
Removing/commenting that out seemed to work for me.
Hope this helps! :)
EDIT: An explanation would be nice! The reason why its only looks like that on an iphone/ipad is because its found within a media query that is targeting smaller screen sizes.
Not sure if you are familiar with media queries? If not it's covered in the CSS foundations course.
In the style.css file that comes with the 2014 theme the suspect code is found under this media query:
@media screen and (min-width: 783px) {
...
}
However, when I viewed your site in chrome developer tools the media query looks like this:
@media screen and (min-width: 1px) {
...
}
Not sure where the min-width: 1px came from but I'm pretty sure that it won't appear that way when you open the original style.css in your text editor.
Let me know if it works or you have any questions :)
Brandon Brigham
3,716 PointsThank you James! That fixed the fixed header issue!
Yeah I have no idea how the 'min-widths' were changed to 1px - should those be some other value?
Also, if you look at the site on a desktop you will notice there is a background image of a vineyard. The image now does not appear on my smartphone... What should I add to the code to include the background image on tablets and smartphones?
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsIt just seemed strange for it to be showing multiple min-width: 1px media queries. I think maybe wordpress is generating this somehow. I'm not really sure to be honest.
After messing around with it for far too long I came up with a pretty bad solution. Try adding this above @media screen and (min-width: 1110px):
@media only screen and (max-width: 996px) {
#body-image {
width: 996px;
}
}
When the screen is resized to 996px the body element no longer covers the whole width of the page. Which is why your image looks cut off. Adding this seems to fix it but its more of a hack than a real solution so bear that in mind!
Its kinda hard to test it properly though when I don't have access to the full code, so give it a try and let me know if it helps. Hopefully it won't break any other parts of the site!
Brandon Brigham
3,716 PointsThanks James! That worked.... You've been awesome!
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsNo problem glad it helped :)
Brandon Brigham
3,716 PointsBrandon Brigham
3,716 PointsAnd now that I look at it. It does the same thing on my iPhone 5S.