This has been bugging me for three years and I think I finally figured it out. Sharing here so 1) I don't forget in case it gets messed up by an update, and 2) in case anyone else is struggling.
The issue is that when you have a site that uses Wordpress Twenty Fourteen theme on your phone, for some reason the featured image gets its top lopped off. I believe this might have something to do with the header bar floating. And I think I might have even tinkered with the header bar so maybe this is unique to me after all. Not sure. But it sucks. Because when I look at a single post page on my site, you can't see the top of the image. So if you've got a picture of somebody, their head gets chopped off. It looks stupid and it drives me crazy.
Here's how to fix it. (Disclaimer: back up everything before you mess with anything.)
Go to Appearance > Editor
In the right nav under Templates, click and open template-tags.php (inc/template-tags.php)
Scroll down to the function twentyfourteen_post_thumbnail()
Above the following line of code:
Code: Select all
<div class="post-thumbnail">
Code: Select all
<!-- JAKE MOD TO GET THE FEATURED IMAGE TO NOT CHOP OFF TOP ON MOBILE -->
<div id="jake-image-break"><br /><br /></div>
<!-- END JAKE MOD -->
This will get your posts looking good on your phone. But wait! Now you've got extra white space when you look on your desktop. Boo! It looks terrible, right? Let fix it!
Go to Appearance > Edit CSS
Open Additional CSS and add the following:
Code: Select all
@media screen and (min-width: 783px) {
div#jake-image-break {
display: none;
}
}
Boom, done. Looks good, right?
#howto #wordpress #twentyfourteen