pagination-full

Since Gander has to play nice on all sort of screen sizes, I've been learning the basics of responsive design. This is what a simple Kaminari pagination element looks like after a little tweaking  so that it styles properly with Twitter Bootstrap:

This is great, except that as the browser width decreases, or someone uses a phone, it starts looking a little less pretty:

pagination-bad

The way we're going to fix this is by shrinking the number of links on either side of the active page as the viewport width shrinks. The first step to this is to give each of the page links a class based on how far they are from the active page:

  • This gives us a set of selectors we can use in CSS to grab pairs of page links. .page.active will select the center link to the current page, .page.away-1 will select the page links directly to the left and right of the center.

    Now we can write some simple media queries to start dropping page links as the window gets smaller.

    @media (max-width: 900px) { .pagination .page.away-4 { display:none; } } @media (max-width: 825px) { .pagination .page.away-3 { display:none; } } @media (max-width: 750px) { .pagination .page.away-2 { display:none; } }

    The screen widths I used there kept the pagination on one line in the viewport when there were four digits in the page numbers. Here's what it looks like in action:

  • 2 Comments