portal.html style

themes/vr/portal/css/main.css

@@ -13,6 +13,8 @@
 }
 #hot{
 }
+
+
 #hot h2{
 	color: #242734;
 }
@@ -30,17 +32,27 @@
 	border-top: 1px solid #FFFFFF;
 	border-bottom: 1px solid #FFFFFF;
 }
-#hot .room{
-	width: 49%;
-	margin-bottom: 40px;
-	margin-right: 2%;
-	background-color: #FFF;
-	float: left;
-	border: 1px solid #CCC;
+
+#fall123{
+	width: 100%;
+	column-count: 2;
+  column-gap: 10px;
+  margin:0 auto;
 }
+
+#hot .room{
+	width: 100%;
+	margin-bottom: 20px;
+	/*margin-right: 2%;*/
+	background-color: #FFF;
+	/*float: left;*/
+	border: 1px solid #CCC;
+	break-inside: avoid;
+}
+
 #hot .room:nth-child(2n){
-	float: right;
-	margin-right: 0%;
+	/*float: right;
+	margin-right: 0%;*/
 }
 #hot .room .installation{
 	display: block;
@@ -52,7 +64,7 @@
 #hot .roomimg{
     height:342px;
 	position: relative;
-	overflow: hidden;	
+	overflow: hidden;
 }
 #hot .roomimg img{
     height: 100%;
@@ -163,6 +175,7 @@
 }
 }
 @media (max-width: 768px) {
+
 #hot .room .installation{
 	margin: 10px 0px;
 	display: none;
@@ -178,9 +191,16 @@
 }
 @media (max-width: 680px) {#hot .roomimg{height: 240px;}}
 @media (max-width: 640px) {
+
+#fall123{
+	width: 100%;
+	column-count: 1;
+  column-gap: 10px;
+}
+
 #hot .room,#hot .room:nth-child(2n){
 	width: 100%;
-	margin: 0px 0% 40px 0%;
+	margin: 0px 0% 20px 0%;
 }
 #hot .roomimg{
 	height: 210px;

themes/vr/portal/css/style.css

@@ -145,7 +145,11 @@ header::before {
 
 }
 
+
+
 @media (max-width: 640px) {
+   /*
+
     #hot .roomimg {
         height: 100px;
     }
@@ -161,6 +165,7 @@ header::before {
         margin: 5px;
     }
 
+*/
     .linkList li {
         float: left;
         width: 50%;
@@ -171,13 +176,13 @@ header::before {
         margin: 5px;
     }
 
-    .btn-style01,
+    /*.btn-style01,
     .btn-style02 {
         width: 47%;
         margin: 2px;
         padding: 5px;
         font-size: 14px;
-    }
+    }*/
 
     .linkList li .ad_info .date {
         font-size: 14px;

themes/vr/portal/portal.html

@@ -144,7 +144,7 @@
 					<em>Recommend</em>
 					<h2>優質店家推薦</h2>
 				</div>
-				<ul class="clearfix">
+				<ul class="clearfix" id="fall123">
 
 					<!--{foreach from=$ad3_list item=ad3s name=ad3s}-->
                     <li class="room">
@@ -164,7 +164,7 @@
                             </li>
 							<!--{/foreach}-->
                         </ul>
-                        <div class="w100">
+                        <div class="clearfix">
                             <a class="btn btn-style01" target="_blank" href="{$http}{$ad3s.domain}"
                                 title="官方網站">官方網站</a>
                             <a class="btn btn-style02" target="_blank" href="{$ad3s.vrmap}"