add adaptive functions

style.css

@@ -341,6 +341,7 @@ a{
       width: 20px;
       height: 15px;
       margin-left: 18px;
+      cursor: pointer;
     }
   
     .btn_search{
@@ -369,6 +370,11 @@ a{
       max-width: 700px;
     }
 
+    #post-img{
+      /**text-align: center;*/
+      background: #F5F5F5;
+    }
+
     .page-numbers {
       display: inline-block;
       padding: 5px 10px;
@@ -385,8 +391,7 @@ a{
       a.page-numbers:hover {
       
           background: #f9f9f9;
-      
-      }
+       }
       
 
   h1{
@@ -399,12 +404,8 @@ a{
 
   .mini-card-block{
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(372px, 372px));
-    grid-gap: 2rem;
-  }
-
-  .mini-card{
-    max-width: 372px;
+    grid-gap: 2rem; 
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   }
 
 
@@ -414,8 +415,15 @@ a{
   }
 
   .mini-card-img{
-    width: 372px;
-    height: 216px;
+   /** width: 372px;
+    height: 216px; */
+    width: 100%;
+  }
+
+
+  .card-img-top{
+    text-align: center;
+    width: 100%;
   }
 
 
@@ -441,6 +449,7 @@ a{
     padding-bottom: 22px;
     margin: 8px 0 32px 0;
     border-bottom: 1px solid #E9EAEB;
+    width: 100%;
    /*text-align: center; */
 }
 
@@ -480,12 +489,15 @@ a{
 }
 
 
-#mosts{
+.mosts{
   background-color: #00466A;
   width: 100%;
   padding: 22px;
 }
 
+
+
+
   .most_title{
     color: #2D9CDB;
   }
@@ -501,6 +513,7 @@ a{
       color: #FFFFFF;
     }
 
+
 .left_preview{
   border-radius: 50%;
   width: 95px;
@@ -602,14 +615,14 @@ a{
 
 .moread{
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(372px, 380px));
-  grid-gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 2rem; 
   margin-top: 8px;
   margin-bottom: 28px;
 }
 
   .moread_card{
-    padding-right: 12px;
+    
   }
 
   .moread_rubric{
@@ -625,8 +638,8 @@ a{
   }
 
   .moread_card IMG{
-    width: 372px;
-    height: 216px;
+    width: 100%;
+    /*height: 216px;*/
     float: top;
   }
 
@@ -665,10 +678,11 @@ a{
 
 .yets{
   display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fit, 320px);
+  grid-gap: 1rem; 
+  grid-template-columns: repeat(auto-fi, minmax(300px, 1fr));
   margin-top: 8px;
   margin-bottom: 28px;
+  width: 100%;
 }
 
   .yet_card{
@@ -772,7 +786,86 @@ img-fluid{
   text-align: center;
 }  
 
-@media (max-width: 640px) {
+.toggle-nav {
+    display: none !important;
+}
+
+
+
+#gamburer_menu{
+  display: none;
+}
+
+
+.mob-lite{
+  display: none;
+}
+
+
+@media screen and ( max-width: 580px ) {
+  
+  .toggle-nav {
+      display: inline-block !important;
+      background: url(/wp-content/themes/vij/pub/icons/burger-15.png) no-repeat; 
+  }
+
+  .btn_rss{
+    display: none;
+  }
+
+  .menu.main {
+    display: inline-block;
+    position: relative;
+    background: #fff;
+    text-align: left;
+  }
+     
+  .menu.main ul {
+    display: none;
+    position: absolute;
+    overflow: auto;
+    top: 0px;
+    right: 0px;
+    z-index: 999;
+    padding-right: 15px;
+    background: #fff;
+  }
+     
+  .menu.main ul li {
+    float: none;
+    display: block;
+    position: relative;
+    top: 0px;
+    right: 0px;
+    min-width: 100px;
+    background: #fff;
+    text-align: right;
+  }  
+   
+
+  #gamburer_menu a{
+    font-weight: bold;
+  }  
+
+   
+  
+  .mob-lite{
+    display: inline-block !important;
+    margin-top: 12px;
+  }  
+
+     
+  .main.menu li:after { 
+    content: none; 
+  }
+
+
+}
+
+
+
+/** ultrabooks and ipads **/
+@media (max-width: 768px) {
   
   #left{
     display: none;
@@ -796,11 +889,12 @@ img-fluid{
 
   #content{
     margin: 8px;
-    width: 540px;
+    width: 100%;
   }
 
-  .img-fluid{
-    max-width: 80%;
+  #mini-card-block{
+    display: grid;
+    width: 100%;
   }
 
 
@@ -812,6 +906,28 @@ img-fluid{
 }  
 
 
+/** mobile **/
+@media only screen 
+and (min-device-width : 375px) 
+and (max-device-width : 667px) { 
+
+  #content{
+    margin: 8px;
+    width: 100%;
+  }
+
+  .mini-card{
+    width: 100%;
+    padding-right: 12px;
+  }
+
+  .mini-card-img{
+    width: 100%;
+  }
+
+}
+
+