Updated responsiveness and libItem

project/static/css/style.css

@@ -94,7 +94,7 @@ span.vert{
   font-size: 22px;
 }
 
-@media (max-width: 480px) { 
+@media (max-width: 568px) { 
   span.vert {
     display: inline-block;
   }

project/templates/library/libraryItem.html

@@ -6,15 +6,18 @@
             <div class="col-xs-12 col-sm-3 col-md-2">
                 <img src="{{ item.poster }}" style="max-width: 180px;" alt="{{ item.title }}">
                 <h3>{{ item.title }}</h3>
+                {% if loan != None %}
+                Loaned to: {{ loan.borrower_email }}<br/>
+                Due back: {{ loan.expected_return_date.strftime('%m-%d-%Y') }}  
+                {% endif %}
                 <div class="btn-group">
                               {% if loan == None %}    
                                   <button type="button" class="btn btn-default btn-small lend-movie" data-toggle="modal" data-target="#loan-form" data-id='{{ item.id }}'>Lend</button>
                               {% else %}  
-                                Loaned to: {{ loan.borrower_email }}<br/>
-                                Due back: {{ loan.expected_return_date.strftime('%m-%d-%Y') }}
                                 <button type="button" class="btn btn-default btn-small return-movie" data-toggle="modal" data-target="#return-form" data-id='{{ item.id }}'>Return</button>
                                 <button type="button" class="btn btn-default btn-small reminder" data-toggle="modal" data-target="#reminder-form" data-id='{{ item.id }}'>Reminder</button>
                               {% endif %}
+
                               {% if library.name != "Master" or loan == None %}
                                 <button type="button" class="btn btn-default btn-small remove-movie" data-id='{{ index }}'>Remove</button>
                               {% endif %}