Make Posts Element responsive

I’d like to show the latest three posts on desktop, but just one on mobile. Is there a way to do that? I also tried to do that with the carousel element. It’s not possible to alter the number of items shown on different screen sizes. Am I missing something here? https://dev.grubeck.wien/

My current workaround: Make two posts elements, one with 3 posts, one with one post, hide and show them on desktop and mobile.

Thx for your help,
Benjamin

Hi Benjamin,
You can’t make the database query dependent on the viewport.

An alternative might be a custom media query for the mobile viewport that hides all posts except the first one visually.

@media(max-width: 479px) {
  .repeater-item:not(:nth-child(1)) {
    display: none;
    visibility: hidden;
  }
}

Best regards,
timmse

2 Likes

Hey timmse,

thx for your quick response. Yes, I did somthing like this with two independent queries. It’s easier to style with the builder, I suppose.

Best regards,
Benjamin