How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

A discussion area for issues about Glorious Noise: bug reports, feature requests, etc.

Moderators: D. Phillips, Jake

Jake
GLONO Team Member
Posts: 7238
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Postby Jake » Thu Jul 27, 2017 1:25 pm

How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

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">


Insert the following block of code:

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 -->


Click Update File

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;
   }
}


Click Save & Publish

Boom, done. Looks good, right?

#howto #wordpress #twentyfourteen

Return to “About the site...”

Who is online

Users browsing this forum: No registered users and 2 guests