fix mobile layout

index.html

@@ -90,12 +90,45 @@ a[x-apple-data-detectors='true'] {
   text-decoration: none !important;
 }
 
+.p-40 {
+  padding: 40px;
+}
+
+.p-80 {
+  padding: 80px;
+}
+
+.row-p {
+  padding: 1rem 1rem;
+}
+
+.p-no1 {
+  padding: 28px 95px;
+}
+
 @media (max-width: 480px) {
   .hide-mobile {
     display: none !important;
     max-height: 0px;
     overflow: hidden;
   }
+  .p-40 {
+    padding: 90px;
+  }
+  .row-p {
+  padding: 1rem .5rem;
+
+  }
+  .p-80 {
+  padding: 40px;
+  }
+  .p-no1 {
+  padding: 15px 0 15px 55px;
+  }
+}
+
+@media (max-width: 576px) {
+  
 
 }
     </style>
@@ -119,8 +152,8 @@ a[x-apple-data-detectors='true'] {
 
 
 <div class="u-row-container" style="padding: 0px;background-color: transparent">
-  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(30deg, #ea5413 , #920783);">
-    <div style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E8%B6%A8%E5%8B%A2%E6%97%A5%E5%A0%B1BANNER.jpg');background-repeat: no-repeat;background-position: center top;background-color: transparent;">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(0deg, #ea5413 , #920783);">
+    <div classs="bg-cover" style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E8%B6%A8%E5%8B%A2%E6%97%A5%E5%A0%B1BANNER.jpg');background-repeat: no-repeat;background-position: center top;background-color: transparent;background-size: contain;">
       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-image: url('images/image-4.png');background-repeat: no-repeat;background-position: center top;background-color: #0000ff;"><![endif]-->
       
 <!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
@@ -131,40 +164,41 @@ a[x-apple-data-detectors='true'] {
   
 
 
-<table class="hide-mobile" style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+<table class="" style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tbody>
     <tr>
-      <td style="overflow-wrap:break-word;word-break:break-word;padding:100px;font-family:'Open Sans',sans-serif;" align="left">
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:25%;font-family:'Open Sans',sans-serif;" align="left">
         
-  <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
-    <tbody>
-      <tr style="vertical-align: top">
-        <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
-          <span>&#160;</span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-      </td>
-    </tr>
-  </tbody>
-</table>
+        <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+          <tbody>
+            <tr style="vertical-align: top">
+              <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+                <span>&#160;</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      
+      <table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+        <tbody>
+          <tr>
+            <td style="overflow-wrap:break-word;word-break:break-word;padding:0px;font-family:'Open Sans',sans-serif;" align="left">
+              
+        <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+          <tbody>
+            <tr style="vertical-align: top">
+              <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+                <span>&#160;</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
-<table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
-  <tbody>
-    <tr>
-      <td style="overflow-wrap:break-word;word-break:break-word;padding:40px;font-family:'Open Sans',sans-serif;" align="left">
-        
-  <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 0px solid #BBBBBB;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
-    <tbody>
-      <tr style="vertical-align: top">
-        <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
-          <span>&#160;</span>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 
       </td>
     </tr>
@@ -216,10 +250,10 @@ a[x-apple-data-detectors='true'] {
 <table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tbody>
     <tr>
-      <td style="overflow-wrap:break-word;word-break:break-word;padding:0px 25px 10px;font-family:'Open Sans',sans-serif;" align="left">
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:0px 10px 10px;font-family:'Open Sans',sans-serif;" align="left">
         <div style="background-color: white; border-radius: 2rem; padding-bottom: .5rem; margin-left: 3%; margin-right: 3%;">
             <div style="display: flex; justify-content: stretch; align-items: center;">
-              <div style="padding: 1rem 1rem; width: 50%;">
+              <div class="" style="width: 50%;padding: 1.2rem .8rem;">
                 <div style="display: flex; border-bottom: 1px dotted grey; margin-bottom: 7px;">
                   <span style="color: #aa6dbc; display: inline-block; flex: 2;">第21名.</span> 
                   <span style="color: #aa6dbc; display: inline-block; flex: 3;" data-no="21">雲林確診</span>
@@ -261,7 +295,7 @@ a[x-apple-data-detectors='true'] {
                   <span style="color: #aa6dbc; display: inline-block; flex: 3;">雲林確診</span>
                 </div>
               </div>
-              <div style="padding: 1rem 1rem; width: 50%;">
+              <div style="width: 50%;padding: 1.2rem .8rem;">
                 <div style="display: flex; border-bottom: 1px dotted grey; margin-bottom: 7px;">
                   <span style="color: #aa6dbc; display: inline-block; flex: 2;">第20名.</span> 
                   <span style="color: #aa6dbc; display: inline-block; flex: 3;">雲林確診</span>
@@ -305,7 +339,7 @@ a[x-apple-data-detectors='true'] {
               </div>
             </div>
             <div style="width: 90%;height: 80px; background-image: url('http://edm.cmm.ai/images/NO1.png'); background-repeat: no-repeat; background-size:100%; margin-right: auto; margin-left: auto; position: relative;">
-              <div style="display: flex; margin: auto; padding: 28px 95px;">
+              <div class="" style="display: flex; margin: auto;padding:  5.5% 0% 5% 19%;">
                 <span style="color: #aa6dbc; display: inline-block; font-size: 1.1rem; margin-right: 1.5rem;">第01名.</span> 
                 <span style="display: inline-block; font-size: 1.2rem;">雲林確診</span>
               </div>
@@ -324,7 +358,7 @@ a[x-apple-data-detectors='true'] {
 <!--立即聯繫-->
 <div class="u-row-container" style="padding: 0px;background-color: transparent">
   <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(210deg, #ea5413 , #920783);">
-    <div style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E7%AB%8B%E5%8D%B3%E9%80%A3%E7%B9%AB.png');background-repeat: no-repeat;background-position: center top;background-color: transparent;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E7%AB%8B%E5%8D%B3%E9%80%A3%E7%B9%AB.png');background-repeat: no-repeat;background-position: center top;background-color: transparent;background-size: contain;">
       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
       
 <!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
@@ -337,7 +371,7 @@ a[x-apple-data-detectors='true'] {
 <table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tbody>
     <tr>
-      <td style="overflow-wrap:break-word;word-break:break-word;padding:80px;font-family:'Open Sans',sans-serif;" align="left">
+      <td class="p-80" style="overflow-wrap:break-word;word-break:break-word;padding: 14%;font-family:'Open Sans',sans-serif;" align="left">
         
       </td>
     </tr>
@@ -380,7 +414,7 @@ a[x-apple-data-detectors='true'] {
     <table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;margin-right: 30px">
       <tbody><tr style="vertical-align: top"><td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
         <a href="https://www.linkedin.com/company/choozmo/" title="Linkedin" target="_blank">
-          <img src="http://edm.cmm.ai/images/linkedin.png" alt="Linkedin" title="Linkedin" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
+          <img src="https://i.imgur.com/u2MFY3U.png" alt="Linkedin" title="Linkedin" width="32" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 32px !important">
         </a>
       </td></tr>
     </tbody></table>