modify col

css/list-style.css

@@ -785,6 +785,12 @@ a {
   transition: all .3s;
 }
 
+@media screen and (max-width: 1200px) {
+  .infoContent .nav-item-link {
+    padding: 0.5rem 1.8rem;
+  }
+}
+
 .infoContent .nav-item-link:hover {
   color: #EE7800;
 }
@@ -798,6 +804,12 @@ a {
   margin-top: .8rem;
 }
 
+@media screen and (max-width: 1200px) {
+  .infoContent .likeSee {
+    width: 12%;
+  }
+}
+
 .infoContent .likeSee span {
   color: #727679;
   font-size: .9rem;
@@ -888,6 +900,12 @@ a {
   transition: opacity .5s;
 }
 
+@media screen and (max-width: 1200px) {
+  .nav-collapse-fixed {
+    width: auto;
+  }
+}
+
 .nav-collapse-fixed.sticky {
   display: block;
   opacity: 1;

css/list-style.scss

@@ -656,6 +656,9 @@ a {
             font-size: .9rem;
             color: #727679;
             transition: all .3s;
+            @media screen and (max-width: 1200px) {
+                padding: 0.5rem 1.8rem;
+              }
             &:hover {
                 color: #EE7800;
             }
@@ -667,6 +670,9 @@ a {
     }
     .likeSee {
         margin-top: .8rem;
+        @media screen and (max-width: 1200px) {
+            width: 12%;
+        }
         span {
             color: #727679;
             font-size: .9rem;
@@ -740,6 +746,9 @@ a {
     top: 52px;
     z-index: -1;
     width: 100%;
+    @media screen and (max-width: 1200px) {
+        width: auto;
+    }
     opacity: 0;
     transition: opacity .5s;
     &.sticky {

index_designerList.html

@@ -875,7 +875,7 @@
         </section>
         <section class="content">
           <div class="row justify-content-around">
-            <div class="col-12 col-md-3">
+            <div class="col-12 col-lg-4 col-xl-3">
               <div class="infoCard">
                 <div class="infoCard__avatar mx-auto mb-3" >
                 </div>
@@ -1088,7 +1088,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-12 col-md-9">
+            <div class="col-12 col-lg-8 col-xl-9">
               <div class="infoContent">
                 <div class="d-flex justify-content-between">
                   <ul class="nav d-flex nav-pills flex-wrap" id="pills-tab" role="tablist">
@@ -1118,7 +1118,7 @@
                       aria-controls="pills-company" aria-selected="false" data-link="https://hhh.com.tw/columns/lists/">設計師公司簡介</a>
                     </li> -->
                   </ul>
-                  <div class="likeSee" hidden>
+                  <div class="likeSee align-self-end" hidden>
                     <span class="likeSee__views">人氣</span>
                     <span class="likeSee__divider"></span>
                     <span class="likeSee__sort">最新</span>

js/index-designer.js

@@ -62,7 +62,7 @@ let totalPages = {
 };
 
 window.onload = function(){
-    if(screen.width < 900){
+    if(screen.width < 600){
         window.location.href = `../index_designerList_mb.html?cid=${cid}`;   
     }
     userAgent = navigator.userAgent;
@@ -377,7 +377,7 @@ function renderTabContent(content, meta) {
                 for(let k = 0;k < content[i].Carddata[j].tags.length; k ++) {
                     tagStr += `<a href="${content[i].Carddata[j].tags[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tags[k]['name']}</a>`
                 }
-                cardData += `<div class="col-md-4">
+                cardData += `<div class="col-lg-6 col-xl-4">
                                 <a href="" target="_blank">
                                 <div class="card">
                                     <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
@@ -477,7 +477,7 @@ function loadMore(designer) {
                 let append = '';
                 let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
                 for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
+                    append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
                                         <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
@@ -515,7 +515,7 @@ function loadMore(designer) {
                 let append = '';
                 let d = designer['Content'][1].Carddata.slice(9*n_video, (9*n_video)+9);
                 for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
+                    append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
                                         <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
@@ -550,7 +550,7 @@ function loadMore(designer) {
                 let append = '';
                 let d = designer['Content'][2].Carddata.slice(9*n_columns, (9*n_columns)+9);
                 for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
+                    append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
                                         <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">