Answers.Body: <p>Have you look at <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" rel="nofollow noreferrer">the <code>matchMedia()</code> API</a>?</p>
  <p>This can allow JavaScript to make different decisions based on viewport size and probably is key to changing this behaviour, whether with Sprig or any other technique.</p>
  <p>Although, if I'm honest providing different content like this doesn't seem fantastic. Maybe consider providing the same content for all screens and treat them differently using CSS.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-10-28T14:03:29.870Z
Answers.LastActivityDate: 2024-10-28T14:03:29.870Z
Answers.UserDisplayName: ianp
Body: <p>I need to create a responsive section, that has a load more button.</p>
  <p>I want the page to show one (small screens), two (medium) or three (large) entries per row.</p>
  <p>Also, on clicking 'load more' one, two or three more entries should be loaded. It'd be great, if it would adjust the number of entries on resize.</p>
  <p>I took a look at sprig, which is great. But i have no idea how i can implement the sprig component in a responsive way.</p>
  <p>Does anyone have an idea how i can achieve this behaviour?</p>
  
Tags: <ajax><pagination><plugin-sprig>
Title: Load more - responsive layout
ThreadText: # Load more - responsive layout
  
  (Asked by: username_0 on 2024-10-09)
  
  I need to create a responsive section, that has a load more button.
  
  I want the page to show one (small screens), two (medium) or three (large) entries per row.
  
  Also, on clicking 'load more' one, two or three more entries should be loaded. It'd be great, if it would adjust the number of entries on resize.
  
  I took a look at sprig, which is great. But i have no idea how i can implement the sprig component in a responsive way.
  
  Does anyone have an idea how i can achieve this behaviour?
  
  **Tags:** ajax, pagination, plugin-sprig
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2024-10-28. Score: 0
  
  Have you look at [the `matchMedia()` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)?
  
  This can allow JavaScript to make different decisions based on viewport size and probably is key to changing this behaviour, whether with Sprig or any other technique.
  
  Although, if I'm honest providing different content like this doesn't seem fantastic. Maybe consider providing the same content for all screens and treat them differently using CSS.
  
  
  ---
  
  