Setting "recent posts" display amount lower for mobile devices

Support
#1

Hey, im using "recent posts on my homepage and I have it set at 3 horizontally. But Id like it to only display 1 on mobile devices. Is this possible?

TIA
Rena

#2

Hello Rena,

Thanks for writing in!

The recent post items will display the same number both in desktop and mobile screens. You may use a custom css to hide the other two items. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  .x-recent-posts.horizontal a{
      display: none;
  }
  
  .x-recent-posts.horizontal a:nth-child(1){
    display: block;
  }    
}

Hope this helps. Please let us know how it goes.

#3

Oh that worked, I appreciate the help. I am still trying to understand the whole nth child thing.

Rena

#4

Hi There,

Please take a look at this article for the nth-child CSS:

Hope it helps :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.