video blog css update

themes/tajian/views/site/index.php

@@ -70,7 +70,7 @@ eof;
                 }
 
                 $snapshot = !empty($file['cover']) ? $imgPreffix . $file['cover'] : '/img/default.png';
-                $title = !empty($file['title']) ? Html::mb_substr($file['title'], 0, 20, 'utf-8') : $file['filename'];
+                $title = !empty($file['title']) ? Html::mb_substr($file['title'], 0, 50, 'utf-8') : $file['filename'];
 
                 $platform = Html::getShareVideosPlatform($file['shortcut']['url']);
                 

www/css/videoblog.css

@@ -21,9 +21,9 @@ a{color: #aaadb2;text-decoration: none}
 .modal-about .modal-body h1{display: none;}
 .breadcrumbs{padding-left: 1.5em;padding-bottom: 10px;}
 .content{padding: 20px 10px}
-.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;cursor: pointer}
-.img-item img{height: 180px;object-fit: cover;}
-.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
+.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;cursor: pointer;max-width: 250px}
+.img-item img{height: 180px;width: 100% !important;object-fit: cover;}
+.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;height:40px}
 .img-item .img-con{display:block;position: relative;width: 100%;height: auto;text-align:center}
 .img-item .duration{display: block;position: absolute;right: 2px;bottom: 5px;background-color: #000;opacity: 0.6;padding: 1px 3px;color: #FFF;border-radius:3px;font-weight: bold;}
 .img-item:hover .vjs-big-play-button{display: inherit !important}
@@ -39,16 +39,17 @@ a{color: #aaadb2;text-decoration: none}
 /* for mobile */
 @media only screen and (max-width: 767px) {
     .menu{max-width:96%;font-size: 15px}
-    .img-item{margin-left: 0;margin-right: 0;width: 100%}
-    .img-item img{height: auto !important;width: 100% !important}
+    .img-item{margin-left: 0;width: 48%;margin-right: 5px}
     .img-item strong{font-size: 14px;}
 }
-@media only screen and (min-width: 540px) and (max-width: 767px) {
-    .img-item{width: 48%;margin-right: 5px;}
+
+@media only screen and (max-width: 359px) {
+    .img-item{margin-left: 0;width: 100%;margin-right: 5px}
 }
 
 /* for pad */
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
     .menu{font-size: 14px}
+    .img-item{max-width: 226px}
     .img-item strong{font-size: 13px;}
 }