update css

static/css/style.css

@@ -280,11 +280,21 @@ body {
 .news-main .post-title a {
   font-size: 34px;
 }
+@media (max-width: 991px) {
+  .news-main .post-title a {
+    font-size: 22px;
+  }
+}
 .news-main img {
-  height: 100%;
+  height: 375px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .news-main img {
+    height: 50vw;
+  }
+}
 .news-main .news-info a {
   font-size: 16px;
 }
@@ -302,6 +312,12 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .focus-content img,
+  .news-featured img {
+    height: 50vw;
+  }
+}
 .focus-content .post-title,
 .news-featured .post-title {
   overflow: hidden;
@@ -356,6 +372,11 @@ body {
   background-position: center center;
   cursor: pointer;
 }
+@media (max-width: 991px) {
+  .tab-content .bg-img {
+    height: 50vw;
+  }
+}
 .tab-content .bg-img section {
   padding: 10px 25px;
   position: absolute;
@@ -413,6 +434,11 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 991px) {
+  .news-all .first-img {
+    height: 50vw;
+  }
+}
 .news-all .line {
   padding: 0 12px;
 }
@@ -422,6 +448,11 @@ body {
   -o-object-fit: cover;
      object-fit: cover;
 }
+@media (max-width: 575px) {
+  .news-all .cover-img {
+    height: 50vw;
+  }
+}
 
 /* news-all.html End */
 /* news-featured.html Start */

static/css/style.scss

@@ -315,12 +315,20 @@ body {
   .post-title {
     a {
       font-size: 34px;
+
+      @media (max-width: 991px) {
+        font-size: 22px;
+      }
     }
   }
 
   img {
-    height: 100%;
+    height: 375px;
     object-fit: cover;
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
   }
 
   .news-info {
@@ -344,6 +352,10 @@ body {
   img {
     height: 175px;
     object-fit: cover;
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
   }
 
   .post-title {
@@ -416,6 +428,10 @@ body {
     background-position: center center;
     cursor: pointer;
 
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
+
     section {
       padding: 10px 25px;
       position: absolute;
@@ -491,6 +507,10 @@ body {
   .first-img {
     height: 50vh;
     object-fit: cover;
+
+    @media (max-width: 991px) {
+      height: 50vw;
+    }
   }
 
   .line {
@@ -501,6 +521,10 @@ body {
     width: 100%;
     height: 220px;
     object-fit: cover;
+
+    @media (max-width: 575px) {
+      height: 50vw;
+    }
   }
 }
 

themes/hugo-bootstrap-5/layouts/index.html

@@ -44,7 +44,7 @@
     {{ partial "news-all.html" . }}
     {{ partial "paginator" . }}
   </div>
-  <div class="col-12 col-lg-3">
+  <div class="col-12 col-lg-3 d-none d-lg-flex">
     {{ partial "news-featured.html" . }}
   </div>
  </div>

themes/hugo-bootstrap-5/layouts/partials/news-main.html

@@ -1,6 +1,6 @@
 <div class="news-main">
   {{ range first 2 (where .Site.Pages "Params.type" "main") }}
-  <div class="col-12 mb-3">
+  <div class="col-12 mb-3 d-flex flex-column-reverse flex-lg-column">
     <div>
       <section class="news-info">
         {{ range (.GetTerms "categories") }}
@@ -12,7 +12,7 @@
         <a href="{{ .Params.url }}">{{ .Params.title }}</a>
       </h2>
     </div>
-    <a href="{{ .Permalink }}">
+    <a href="{{ .Permalink }}" class="mt-3 mt-lg-0">
       <img class="img-fluid" src="{{ .Params.image | relURL }}" alt="" />
     </a>
   </div>