Related Posts shows weird column layout

  • Resolved HillofBeans

    (@hillofbeans)


    8 years, 3 months ago

    I’ve enabled a default layout of 6 Related Posts on my site.

    On desktop, the site looks fine and displays the following layout:

    x x x
    x x x

    However on mobile, the layout is:

    x x
    x
    x x
    x
    x x

    How can I make 2 columns of 3 rows on desktop?

    The code I’m using is:

    // show 6 related posts
function jetpackme_more_related_posts( $options ) {
 $options['size'] = 6;
 return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

// Change “Related” headline at the top of the Related Posts section
//Jetpack Related Posts - changing related text and class
function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
'<h5 class="jp-widget-title">%s</h5>',
esc_html( 'Related Content' )
);
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );
add_filter( 'jetpack_relatedposts_filter_post_context', '__return_empty_string' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    Since you changed the number of posts displayed by Related Posts, you’ll also need to update the CSS, and the CSS media queries that Jetpack’s CSS to break Related Posts into multiple lines depending on the size of your device.

    This thread contains a few helpers that should help you understand how the default style works, and how you can customize it in your theme or in a custom CSS editor:
    https://www.ads-software.com/support/topic/related-post-thumbnails-reflow-in-responsive-theme/

    Thread Starter HillofBeans

    (@hillofbeans)

    This thread contains a few helpers that should help you understand how the default style works, and how you can customize it in your theme or in a custom CSS editor:

    Hi Jeremy,

    You are making the assumption that I am familiar with CSS.

    From what I gather from your answer, a 2 column layout in JP Related Posts is not something that’s easily achievable without an intermediate level knowledge of CSS.

    Unfortunately I’m a publisher/writer with a small amount of technical knowledge.

    I’ve tried copying and pasting all of the code suggestion in your link, but none of them work.

    Do you have any suggestions how I might get this to work, or do I need to pay someone on Upwork?

    #NOTRESOLVED

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    From what I gather from your answer, a 2 column layout in JP Related Posts is not something that’s easily achievable without an intermediate level knowledge of CSS.

    That’s correct. Changing the default layout, and making sure the layout looks good on all device sizes, will require the use of multiple media queries. You’ll need to be familiar with CSS to do that.

    While I can offer some pointers here on the forums, and help you with basic CSS requests, I’m afraid I can’t redesign the layout on multiple screens for you. I’d recommend that you post on CSS forums, or look for a WordPress professional on the WordPress job board, or here.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Related Posts shows weird column layout’ is closed to new replies.

Tags