Related Posts not well aligned on mobile (Responsiveness issue)

Unfortunately there’s not much that can be done about that.

It’s up to the theme to control how those are adapted in the responsive view.

In this case, their solution appears to be to break up the row.

Looks like the message wasn’t clear… My theme is not the cause, thats how the Jetpack related post is (and besides, I just changed my site theme few days ago and it’s still same)

I wanted to make the jetpack related post with two-column as in the mobile view. After increasing the post counts to 6 or 9, 2 related posts come on the first column and 1 on the second row, and 2 related posts start on the next row followed by 1 related post on the fourth row.

So what I want is for it to be 2 related posts on each column. Kindly check the site out in the mobile view to get what i am talking about.

If I change the number of related posts on my own site, using a different theme, to show six, it shows them in rows of two, without breaks like you’re seeing on your site. If I change it to nine, same. In fact, on my site on a post that shows nine on desktop, it only shows 8 on mobile, so as to not show an empty space next to the last one.

See: https://photos.kokkieh.blog/2018/11/01/hunter/

If we’re using the same version of Jetpack, and we’re using the same code snippet from https://jetpack.com/support/related-posts/customize-related-posts/#number to customize this, the only other factor that could be influencing things is the theme.

I looked at your related posts in the browser inspector, and it appears the code causing this is coming from several rules starting at line 5112 in the 303dd.css file on your site. That file is not added by Jetpack, so it’s either coming from your theme or from another plugin.

The 303dd.css you saw is a minified .css code… I deactivated the plugin doing the minification and the result is the same. This same issue is in this thread: https://www.ads-software.com/support/topic/how-do-i-change-the-jetpack-related-post-column-which-is-fixed-to-3-to-2/ I used the code but only 1 and second column was okay and it also affected the desktop related post view. Kindly look into this issue well

I still see the same code affecting this behaviour in the browser dev tools, but now it’s coming from the file, 2c761.css. That file is also not part of Jetpack.

Try disabling all plugins on your site except Jetpack and whatever code snippets plugin you’re using to modify the number of posts displayed. Also switch your site to a default theme like Twenty Nineteen. Does the issue go away?

Then re-enable your theme and plugins one at a time until the issue reoccurs. That will help narrow down exactly what is causing this.

Yea, both 2c761.css and 303dd.css are just .css files in different locations (CDN) . I deactivated all plugins; leaving just jetpack and changed theme to wordpress default one,,,, and the issue still remains. See photo https://prnt.sc/pedk83

Come to think of this more, you’re right. This is just how it works.

I tracked down https://github.com/Automattic/jetpack/issues/2174 which was closed for lack of activity, but you can see some recommended CSS in there to fix it yourself.

Thanks, it works for 6 posts

• This reply was modified 5 years, 5 months ago by SamX.