Facebook Google + RSS Feed

Responsive Web Design for Libguides

March 4, 2015 by

Do you use libguides? Do you want your users to access your libguides easily on laptops, tablets, and other small devices? Give your libguides a basic responsive web design with these step-by-step instructions.

Responsive website design has become a thing. At a basic level, a website with a responsive design responds to the user to make its content more accessible. For example, the site’s format may change to allow its content to be accessed in any size browser window or device. If the window is small, then a responsive site often displays content in a long column so that folks don’t have to worry about scrolling from left to right. At more developed levels responsive web design actually gets pretty interesting as the format can change to the extent that the content is altered. (E.G. on mobile phones alternative code allows clicking the phone number to make a call, links get larger and look more like buttons to allow users to click them more easily, and alternative images can be used to for smaller screens.)

The new version of libguides has a responsive design out-of-the-box, however many folks still use the the old version. I wrote this CSS to make the old version of libguides responsive, and after seeing so many other instances of the old libguides I thought others might like to have it.

Right now when you make a window smaller you lose sight of the content on the right side. By following the steps below, your guides will all look the same when the window is large. However, when the window is small the guide will alter the content boxes to position them in a long column so that they are all still visible without scrolling left to right.

Here is the code to paste into the text box called “Custom JS/CSS Code” and save at DASHBOARD–>ADMIN STUFF–>Look and Feel:

<style>@media screen and (max-width:985px){#banner,#wrapper{width:100%!important}#content{box-sizing:border-box}#container,#contentcenter,#contentleft,#contentright{width:100%!important}#footer,.stitle{width:100%!important;box-sizing:border-box}}@media screen and (max-width:480px){.lgsearch{display:none}}</style>

Here are step-by-step instructions:

  1. Go to any of your libguides.
  2. In the upper-right click Admin Sign In
  3. Log in to libguides with your ID and password.
  4. In the upper menu click DASHBOARD
  5. In the upper menu click ADMIN STUFF to open the drop-down menu.
  6. From the drop-down menu select Look & Feel.
  7. Scroll down to the section called “Code Customizations – Public Pages.”
  8. The first box in this section is called “Custom JS/CSS Code.” Paste the following code into that box:

    <style>@media screen and (max-width:985px){#banner,#wrapper{width:100%!important}#content{box-sizing:border-box}#container,#contentcenter,#contentleft,#contentright{width:100%!important}#footer,.stitle{width:100%!important;box-sizing:border-box}}@media screen and (max-width:480px){.lgsearch{display:none}}</style>

  9. Click the “Save Custom JS/CSS” button under the box.

After saving, then check your guides to be sure that you are pleased with the results by going to any guide, holding down control, and using the scroll wheel to make the content larger. Alternatively, make the window smaller. You should see changes just when the content on the right would have disappeared.

Update March 6, 2015

This is slightly smaller, and it does the same thing.

<style>@media screen and (max-width:985px){#banner,#wrapper,#container,#contentcenter,#contentleft,#contentright,#footer,.stitle{width:100%!important}#content,#footer,.stitle{box-sizing:border-box}}@media screen and (max-width:480px){.lgsearch{display:none}}</style>

Update March 27, 2015

For those of us who use the “book” option to display books in a list with an image on the left and a description on the right, we may add .book_description {overflow:hidden} to stop longer descriptions from wrapping underneath the book images. That updated code is below:

<style>.book_description{overflow:hidden}@media screen and (max-width:985px){#banner,#wrapper,#container,#contentcenter,#contentleft,#contentright,#footer,.stitle{width:100%!important}#content,#footer,.stitle{box-sizing:border-box}}@media screen and (max-width:480px){.lgsearch{display:none}}</style>

Update April 3, 2015

For those of us who use the browser Chrome, a one-pixel, white, vertical white line appears on the left side of the menu tabs across the top of a guide sometimes. The code below is updated to fix that by adding#tabsI a {padding-left: 3px;}.

<style>#tabsI a {padding-left: 3px;}.book_description{overflow:hidden}@media screen and (max-width:985px){#banner,#wrapper,#container,#contentcenter,#contentleft,#contentright,#footer,.stitle{width:100%!important}#content,#footer,.stitle{box-sizing:border-box}}@media screen and (max-width:480px){.lgsearch{display:none}}</style>

Last Updated: April 3, 2015


Welcome

I am a storyteller, librarian, and a legal research specialist. This site serves as my blog and online résumé.

Twitter Feed