Having a different number of blog posts show on desktop and mobile

[Rayvaughn1]

I am trying to allow my desktop site to show two blog posts (the 2 large images stacked vertical) but on mobile i’d only like one to show. Usually on the elements I could goto customize and hide this element on mobile then create another hiding desktop and setting it to 1 post but customize doesnt pop up for this element.

Im using the classic recent posts element

[Prasant]

Hello Ray,

Thanks for asking.

You can use CSS media queries to display or hide elements based on screen sizes. Please follow following steps:

1. Add a class name in CLASSIC RECENT POSTS element.
2. Then add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .hide-mobile {
    display: none;
}
}

Please change class name hide-mobile as per your requirement.

If you would like to explore CSS media queries, please take a look at following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.