How to Align Jetpack Related Posts for Mobile View

How to Align Jetpack Related Posts for Mobile View

How to Align Jetpack Related Post for Mobile View

How to Align Jetpack Related Posts for Mobile View-: Jetpack is a Power-Packed Plugin for WordPress developed by Automattic. It is Ultimate toolkit for WordPress to manage your WordPress website. JetPack Related post tool is a very useful tool to show related post in your blog post to keep engaged your user and reduce your bounce rate. Reduction in bounce rate will ultimately boost your SEO ranking. I personally use Jetpack Related post plugin to show related post inside my blog post.

Advantages of Related Posts-:

Placing related posts at the end of an article to attract your audience has a number of advantages. For one, it reduces bounce rate. A high bounce rate may mean they haven’t found what they want; while a low one means your site is meeting their needs.

Any related post plugin runs a query on your server to show related post which increases your database size but Jetpack uses their own server to run these query which does not increase your database size. For more info, you can read my post Comparison of Jetpack Vs YARPP for related post

How to Align Jetpack Related Posts for Mobile View-:

If you use Jetpack related post with no of multiple of three like 3,6,9 looks good on desktop but on Mobile view, it creates a blank block. Which does not look good? If you want to align the Jetpack Related post for Mobile View use following line of code in your custom CSS theme of your website. Go to customizer option of your theme and paste the following line of code. Please Note-: change the number in below code to get the perfect look. It depends upon how many related posts you are using.

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+3) {

    clear: none !important;

}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+3) {

    clear: none !important;

}

Conclusion-: Code mention in this post works best with 3 related posts. on mobile view, it will show one post less which mean two posts which will not create blank space. if you want to show more than three post change the number given in the code.

Thanks for reading…“Pardon my grammar, English is not my native tongue.”

If you like my work, Please Share on Social Media! You can Follow WP knol on Facebook, Twitter, Pinterest and YouTube for latest updates. You may Subscribe to WP Knol Newsletter to get latest updates via Email. You May also Continue Reading my Recent Posts Which Might Interest You.

Share the Knowledge!
  • 117
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
    118
    Shares
Amar Patel on FacebookAmar Patel on PinterestAmar Patel on TwitterAmar Patel on Wordpress
Amar Patel
Hi, I am Amar Patel from India. Founder, Author and Administrator of wpknol.com. I am a Simple Average Man who Loves life and Love living life.Professionally I am a Mechanical Engineer. Apart from my Job, I Love to write the things around WordPress WordPress CMS.
Enter your email address: Delivered by FeedBurner
Follow us on Social Media