Support » Plugin: Jetpack - WP Security, Backup, Speed, & Growth » Related Posts not well aligned on mobile (Responsiveness issue)

  • Resolved SamX

    (@techlector)


    Related posts are not aligned well on mobile, it skips to next line after 3 related articles (see screenshot: https://prnt.sc/pe1x8x)

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor James Huff

    (@macmanx)

    Volunteer Moderator

    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.

    Thread Starter SamX

    (@techlector)

    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.

    Plugin Support KokkieH

    (@kokkieh)

    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.

    Thread Starter SamX

    (@techlector)

    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://wordpress.org/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

    Plugin Support KokkieH

    (@kokkieh)

    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.

    Thread Starter SamX

    (@techlector)

    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 http://prnt.sc/pedk83

    Plugin Contributor James Huff

    (@macmanx)

    Volunteer Moderator

    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.

    Thread Starter SamX

    (@techlector)

    Thanks, it works for 6 posts

    • This reply was modified 2 years ago by SamX.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Related Posts not well aligned on mobile (Responsiveness issue)’ is closed to new replies.