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, 2019 at 11:32
  • Thanks .Will give it a short
    – naijacoder
    Sep 13, 2019 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, 2019 at 0:01
  • Any other solution for this scenario?
    – naijacoder
    Oct 23, 2019 at 12:42


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.