To make your site more user-friendly, make sure to check the mobile view for all of your LibGuides.
The code below will let you add a completely different design for your mobile view than for your desktop view. This code is slightly more complicated than the other CSS on this guide. For this, you'll need to add two <divs> into your box code. You can also add optional style for those divs into your CSS. For this example, we're using a custom search box, but this could be applied to any LibGuide design.
Optional CSS code:
<style>
.custom-search {
Place CSS here to control the look of your mobile search box
}
.custom-search.hidden-xs {
Place CSS here to control the look of your desktop search box
}
</style>
Use the HTML below in the box you'd like to add an alternate view in:
<div class="custom-search hidden-xs">
Your desktop search box design goes here.
</div>
<div class="custom-search hidden-md hidden-lg hidden-sm">
Your mobile search box design goes here.
</div>
Using the method above for this search box, the following search box can be created. It completely changes to a different search box when this page is viewed on mobile or resized. Try resizing your browser to see it change!
There are several ways you can change the CSS for your LibGuides. First, you can visit the "Look & Feel" section of your LibGuides Admin interface and click on the "Custom JS/CSS" tab. Alternatively, you can change the CSS for an entire group of guides by editing the group's "Custom JS/CSS" tab in the group admin interface. Or finally, you can change the CSS for a single guide under the "Guide Layout" drop down menu by clicking on "Guide Custom JS/CSS." Conveniently, the code is the same.
