Is it possible to query loop that reflect differently to different screen sizes?

  • Is it possible to query loop that reflect differently to different screen sizes?
    Let assume on the front page I have 5 column posts on category one on large screen. Then as the browser shrinks to @media (max-width: 900px), @media (max-width: 550px) , @media (max-width: 400px) the number of posts to display then reduces to 4. Is it possible using loop to achieve this rather than using css to hide one of the columns

Viewing 3 replies - 1 through 3 (of 3 total)

  • yes you can… try to edit your

    @media (max-width: 900px)

    columns count for @media (max-width: 400px)

    Thread Starter shaibustephen

    (@shaibustephen)

    okay. the number post assigned to widget is 5. Presently I have 5 posts in large screen and others.
    How should I use column to reduce the number of loop posts to say 4 in smaller screens as you said columns can be used to achieve that then

    Moderator bcworkz

    (@bcworkz)

    Hiya shaibustephen,

    The problem is the posts are generated server side. The server doesn’t have a practical way to know the user’s display size based on the initial request. Pure CSS solutions work well because they work client side where the display size can be known.

    You could simply hide the extra posts using CSS, but that’s not nice for mobile users to have to get data for 5 posts but they can only see 2 or 3 of them.

    Unsurprisingly, the best solution is the most complicated. Have the widget fetch the posts desired based on display size via Ajax after the initial widget HTML is output without any posts, or with a minimal number. On larger displays it can fetch more posts. This does mean an extra request needs to be made to fully load the page, as well as needing to re-configure how the widget works at a fundamental level.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Is it possible to query loop that reflect differently to different screen sizes?’ is closed to new replies.