If you want to see the code I'm using on my live site, visit www.randolphlibrary.org/mobilesite.htm
In short: How can I implement a list-view style for users with a viewport of max-width 768px so that it caters to mobile users?
My plan was to add this code to the header:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" media="(max-width: 768px)"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
However, the challenge lies in getting the mobile device to prioritize this jQuery stylesheet over the default CSS already in place.
Someone suggested creating a media query with @media= "(max-width: 768px) { display:none; } but it didn't work as expected.
This seems like a simple problem, yet I'm struggling to find a solution. Even manually adding display:none; to the body in the default CSS isn't effective.
Any advice would be greatly appreciated as I aim to make our small town library more appealing to the younger generation glued to their phones.
UPDATE: My mentor mentioned that for a basic jQuery Mobile page, we need three files in the head section: a CSS file for jQuery functionality, a Javascript file enabling jQuery, and another JavaScript file supplementing the core jQuery functions for mobile devices (jQuery Mobile).
With the inclusion of the above three files, I thought I had everything set up correctly. However, I still encounter some issues.