I have a site that is using the pnp responsive and the webparts are responsive. But i'm using a jquery (easypaginate.js) in the webpart.

When i resize my webpart how can i dynamically change the step option to show only 3 li items when i resize the screen to let say 500px using (media queries) @media (max-width: 500px)

Below is the default setting options


I want the step to be 3 when i go on a smaller screen. Thanks in Advance

  • i do not think you can apply any media query on this ,but for sure you can get the windows width and apply easypaginate plugin. if(window.width >500)$('ul#items').easyPaginate({ step:7, nextprev:false, numeric:true }); }else{$('ul#items').easyPaginate({ step:3, nextprev:false, numeric:true }); }} Sep 11 '19 at 11:32
  • Thanks .Will give it a short
    – naijacoder
    Sep 13 '19 at 7:20
  • Gave it a shot but didn't do it.It doesn't show the render the paginaton buttons. I think i need to pass some variable to the tepas depending on the window size for it to work
    – naijacoder
    Sep 16 '19 at 0:01
  • Any other solution for this scenario?
    – naijacoder
    Oct 23 '19 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.