diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index 34d925383..e15b14d96 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -275,11 +275,8 @@ $btt-size: 40px;
 }
 
 .galleryItem {
-  width: 22%;
-  padding: 5px;
-  float: left;
+  margin-bottom: 32px;
   height: 330px;
-  margin: 2% 1% 2% 1%;
   overflow: hidden;
   border: 1px solid #9e9e9e;
   h3 {
diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index 93b818f96..095cccb24 100644
--- a/resources/views/books/grid-item.blade.php
+++ b/resources/views/books/grid-item.blade.php
@@ -1,13 +1,15 @@
-<div class="col-md-3 galleryItem"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <h3>
-        <a class="text-book entity-list-item-link" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i><span class="entity-list-item-name">{{$book->name}}</span>
-        <br>
-        <img @if($book->image === NULL) src="{{baseUrl('/default.jpg')}}" @else src="{{$book->image}}" @endif alt="{{$book->name}}">
-        </a>
-    </h3>
-    @if(isset($book->searchSnippet))
-        <p class="text-muted">{!! $book->searchSnippet !!}</p>
-    @else
+<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"  data-entity-type="book" data-entity-id="{{$book->id}}">
+    <div class="galleryItem">
+        <h3>
+            <a class="text-book entity-list-item-link" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i><span class="entity-list-item-name">{{$book->name}}</span>
+            <br>
+            <img @if($book->image === NULL) src="{{baseUrl('/default.jpg')}}" @else src="{{$book->image}}" @endif alt="{{$book->name}}">
+            </a>
+        </h3>
+        @if(isset($book->searchSnippet))
+         <p class="text-muted">{!! $book->searchSnippet !!}</p>
+         @else
         <p class="text-muted">{{ $book->getExcerpt() }}</p>
-    @endif
+        @endif
+    </div>
 </div>
\ No newline at end of file