Whether you like it or not, Jetpack is one of the most popular WordPress plugins in the WordPress ecosystem. According to WordPress.org, there are more than 5 million active installations of the Jetpack plugin on WordPress sites. It has quite a number of very useful functions and features that would otherwise require several plugins to achieve these functions. Among them, Jetpack related posts is one of the popular and useful functions of this plugin. It lists the posts that are related to the current post that the user is reading, with the option to show thumbnails.
You can either display the related posts in a list or in a grid. Grid display is a more popular option among WordPress users as it shows all the related posts in a three-column layout with large thumbnails. Usually, the plugin will display the thumbnails in a one-column layout on mobile view, especially if your theme is a responsive theme (such as Astra).
Jetpack may display the related posts in a two-column layout in some WordPress themes in the mobile view. This is because Jetpack leaves the styling of the related posts displays to the theme. In some themes, especially in a responsive theme (for example, Astra WordPress Theme), it displays posts in a one-column layout on mobile view. In other themes, the related posts may show up in two columns instead of one column. This mainly occurs with non-responsive older themes.
The related posts displayed in a two-column layout on mobile are not as clutter-free and attractive as the one-column layout: the thumbnails are quite small and cluttered and titles are also quite cramped. In addition, because there are usually three related posts per article, two posts will go to the first row while the third post will go to the second row, with an ugly empty space beside this third post. There is no setting in Jetpack to control the appearance of the related posts as Jetpack leaves this to themes to decide. In most themes, there is also no setting to modify the style of the related posts.
Jetpack related post display solution
If you have a theme that doesn’t display related posts in a single column in mobile view, below is the ready solution to solve this problem. The following codes can force the themes to display related posts in a single column in mobile view.
@media only screen and (max-width:640px) {
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
float: none;
margin: 10PX auto;
max-width: 350px;
padding-top: 20px;
width: 100%;
}
}You can add these codes to the child theme. This is usually a preferred method as it would not be overwritten when you update your theme. However, as this is such a short code snippet, you can simply add this into your theme in the customizer. Go to your WordPress admin area and click Appearance -> Customize. In Customizer, go to Additional CSS. Copy the above codes and paste them into the text box. Click Publish. If you have any caching plugins active, don’t forget to clear the cache. Now, visitors to your site on mobile will see related posts in a single column.
There is also another method that doesn’t involve adding additional CSS codes. If you are using the AMP plugin for WordPress, the chance is, your related posts will show up in a single column in mobile view. However, it depends on whether your theme is compatible with the AMP plugin. Not all themes work well with the AMP plugin, so I would advise testing before you use this method.