s

app/pub/css/an.css

@@ -7,6 +7,49 @@ body.books-body {
     width: 65%;
     font-size: .8em;
 }
+#row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 5px 0;
+    background: #e4e4e4;
+}
+    #book_id {
+        width: calc(33.333% - 14px);
+        box-sizing: border-box;
+        position: relative;
+        background: #fff;
+        margin: 7px;
+        border-radius: 7px;
+    }
+    .pricename {
+        font-weight: bold;
+        text-align: center;
+    }
+    #priceanons {
+        width: calc(65% - 20px);
+        background: white;
+        margin: 10px;
+        border-radius: 5px;
+        padding: 20px;
+        box-sizing: border-box;
+        letter-spacing: 0.1px;
+        line-height: 25px;
+    }
+    .price {
+        background: #0e920e;
+        margin: 7px;
+        padding: 5px;
+        text-align: center;
+    }
+        .price a {
+            color: white;
+            text-decoration: none;
+            text-transform: uppercase;
+            letter-spacing: 0.2px;
+        }
 #book-html p {
     width: 70%;
     display: block;
@@ -319,12 +362,11 @@ input[type="email"],input[type="password"]{
     flex-wrap: wrap;
 }
 .book_skeleton {
-    width:25%;
-    margin-bottom: 30px;
-    margin-top: 30px;
+    width:calc(25% - 20px);
+    margin: 10px;
 }
 .book_mini {
-    width: 60%;
+    width: 100%;
     background: white;
     border-radius: 7px;
     border: 1px solid #cdd8e2;
@@ -367,11 +409,7 @@ input[type="email"],input[type="password"]{
 }
 
 @media screen and (max-width: 1260px) {
-    .book_skeleton{
-        margin-top: 20px;
-    }
     .book_mini{
-        width: 70%;
         font-size: .9em;
     }
 }
@@ -411,9 +449,6 @@ input[type="email"],input[type="password"]{
 
 
 @media screen and (max-width: 1100px) {
-    .book_skeleton{
-        margin-top: 15px;
-    }
     #logo {
         width: 170px;
     }
@@ -425,12 +460,6 @@ input[type="email"],input[type="password"]{
     }
 }
 @media screen and (max-width: 1000px) {
-    .book_mini{
-        width: 75%;
-    }
-    .book_skeleton{
-        margin-top: 10px;
-    }
     header .lite-logo {
         width: 30%;
     }
@@ -465,10 +494,8 @@ input[type="email"],input[type="password"]{
         width: 35%;
     }
     .book_skeleton{
-        width: 50%;
-    }
-    .book_mini{
-        width: 75%;
+        width: calc(50% - 40px);
+        margin: 20px;;
     }
     #logo {
         width: 125px;