Alignment Center

  • Resolved GymPerformance

    (@gymperformance)


    7 years, 1 month ago

    Good day friends

    I’d like to align the rel post contain to the center.

    Right now, it seems to be left aligned and thus the posts not in the middel (at least on desktop).

    Can someone explain me how to do that?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Asad Shahbaz

    (@artisticasad)

    7 years, 1 month ago

    Hi there,

    In order to align related post content in the center you just need to place this code snippet in your theme’s functions.php file at the very bottom.

    
add_filter( 'rpt_content_align', 'rpt_content_align_callback' );
function rpt_content_align_callback( $align ) {
  $align = 'relpost-align-center';
  return $align;
}

    That’s all!

    Thank you for using Related Posts Thumbnails ✌

    Thread Starter GymPerformance

    (@gymperformance)

    7 years, 1 month ago

    Thank you.

    Implemented the code and the thumbnails are now centered on desktop devices. Works great so far.

    However, I figured that they are not fully visible on mobile anymore:

    Is there a way to use other pictures (or a smaller version of them) for mobile devices?

    Asad Shahbaz

    (@artisticasad)

    7 years, 1 month ago

    Hey @gymperformance

    I found some css issues with the related posts layout which makes images look odd on mobile view. You can use the following custom css snippet in your theme to solve the problem.

    @media (max-width: 680px) {
  .relpost-block-single {
    width: 100%;
  }
  .relpost-block-single-image {
    background-size: contain !important;
    height: 180px !important
    margin: 0 auto;  
  }
  .relpost-block-single>div {
    width: 100% !important;
    height: 100% !important;
  }
}

    Hope it will help 🙂
    Thank you

    • This reply was modified 7 years, 1 month ago by Asad Shahbaz.
    Thread Starter GymPerformance

    (@gymperformance)

    7 years, 1 month ago

    thanks! that makes it definitely better.
    However, the realted posts still don’t appear optimal.
    If you have a look at https://gymperformance.ch/koerperhaltung-verbessern/, you’ll see weird spaces between the thumbnail and the post titles.

    any fixes for that?

    thank you.

    Asad Shahbaz

    (@artisticasad)

    7 years ago

    Sorry, I am not sure which weird spaces are we talking bout here. I see all post thumbnails and titles with even distance between them.
    Can you please point out in screenshot.

    Thank you

    Thread Starter GymPerformance

    (@gymperformance)

    7 years ago

    Here’s a print screen–

    this way, it is not clear to what image the title belongs to since the spaces are too high…

    any way to fix that?

    Thanks in advance

    Asad Shahbaz

    (@artisticasad)

    7 years ago

    I see that the code I provided is not applied correctly.

    Please replace this:

    
@media (max-width: 680px)
.relpost-block-single-image {
  background-size: contain !important;
  height: 180px !importantmargin: 0 auto;
}

    from your code that you pasted earlier to this

    
@media (max-width: 680px)
.relpost-block-single-image {
  background-size: contain !important;
  height: 165px !important;
  margin: 0 auto;
}

    And also add this to create even spacing

    
.relpost-block-single:not(:first-child) {
  margin-top: 35px;
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Alignment Center’ is closed to new replies.