How to change amount of yarpp posts for different screen width?

  • Resolved George

    (@giorgos93)


    3 years, 8 months ago

    Hi, I want to ask you, if it’s possible to change the amount of yarpp posts for different screen widths? I just need a code.

    For example, I want to display 6 posts starting from 1200px width, 4 posts from 992px and until 1199px, 6 posts from 733px to 991px, 4 posts from 469px to 732px, and 3 posts from 0px to 468px.

    Is it possible to add?

    Thanks in advance for answer!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter George

    (@giorgos93)

    Will somebody ever answer me? I just need a code for @media rule, so I can add it in my style.css file.

    Plugin Support Michael Nelson

    (@mnelson4)

    Hi @giorgos93, sorry your question didn’t get answered, there’s been quite a lot going on.
    Yes it’s possible for you to use CSS media queries to hide certain related posts.
    Eg this shows only 4 related posts on screens that are between 992 and 1199px wide

    
@media (min-width:992px) and (max-width:1199px){
    .yarpp-thumbnails-horizontal .yarpp-thumbnail:nth-child(-n+2){
	display:inline-block
    }
    .yarpp-thumbnails-horizontal .yarpp-thumbnail{
	display:none;
    }
}

    So you would then need to repeat a similar for each other screen size you want to define.

    Does that make sense?

    • This reply was modified 3 years, 6 months ago by Michael Nelson. Reason: fix code formatting
    Thread Starter George

    (@giorgos93)

    Hi! Yes, this code did help. I had to add !important for it to work. And you forgot to add ‘;’ after display:inline-block . And at least in my case ‘nth-child(-n+2)’ displayed 2 related posts, not 4. So I had to change the number to 4. Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change amount of yarpp posts for different screen width?’ is closed to new replies.