fix: feed modal 适配手机

app/code/Joshine/InstagramFeed/view/frontend/templates/mediafeed.phtml

@@ -16,7 +16,6 @@ $media = $block->getMedia()['data'];
 
     .instagram-feed-container {
         margin: 0 auto;
-        max-width: 1500px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
@@ -34,6 +33,49 @@ $media = $block->getMedia()['data'];
         float: left;
         overflow: hidden;
         position: relative;
+        height: 244px;
+        width: 100%;
+    }
+
+    @media (max-width: 767px) {
+        .instagram-media-wrapper {
+            height: 100px;
+        }
+        #instagram-modal .instagram-media-modal-wrapper {
+            height: 30vh !important;
+        }
+        #instagram-modal .instagram-content-wrapper {
+            height: 30vh;
+        }
+        .joshine-model-warp .j-modal .j-modal-dialog {
+            height: 65vh;
+            width: 90% !important;
+        }
+    }
+    @media (min-width: 768px) and (max-width: 991px) {
+        .instagram-media-wrapper {
+            height: 150px;
+        }
+        #instagram-modal .instagram-media-modal-wrapper {
+            height: 30vh !important;
+        }
+        #instagram-modal .instagram-content-wrapper {
+            height: 30vh;
+        }
+        .joshine-model-warp .j-modal .j-modal-dialog {
+            height: 65vh;
+            width: 90% !important;
+        }
+    }
+    @media (min-width: 992px) and (max-width: 1199px) {
+        .instagram-media-wrapper {
+            height: 180px;
+        }
+    }
+    @media (min-width: 1200px) {
+        .instagram-media-wrapper {
+            height: 244px;
+        }
     }
 
     .instagram-media-wrapper .instagram-media-url {
@@ -90,12 +132,11 @@ $media = $block->getMedia()['data'];
     #instagram-modal .instagram-media {
         height: 100%;
         display: block;
-        width: 100%;
+        object-fit: contain;
     }
 
     #instagram-modal .instagram-media-modal-wrapper {
         height: 600px;
-        padding: 10px;
         background-color: #0b0b0b;
     }
 
@@ -156,6 +197,8 @@ $media = $block->getMedia()['data'];
         padding: 16px 0;
         text-align: end;
     }
+
+
 </style>
 
 <?php if (!empty($media)): ?>
@@ -166,8 +209,8 @@ $media = $block->getMedia()['data'];
                     <h2 class="instagram-feed-title section-title title4">Follow us so you'll never miss an update</h2>
                     <div class="instagram-feed-block">
                         <?php foreach ($media as $row): ?>
-                            <div class="instagram-media-wrapper"  data-feed-data='<?= json_encode($row) ?>'
-                                 style="margin-right: 2px; margin-bottom: 2px; width: 248.333px; height: 248.333px;">
+                        <div class="joshine-col-lg-2 joshine-col-md-2 joshine-col-sm-3 joshine-col-xs-3" style="padding-right: 2px; padding-bottom: 2px;">
+                            <div class="instagram-media-wrapper "  data-feed-data='<?= json_encode($row) ?>'>
                                 <img class="instagram-media-url"
                                      src=" <?= $row["thumbnail_url"] ?? $row["media_url"] ?> ">
                                 <?php if (isset($row["media_type"]) && $row["media_type"] == 'VIDEO' ) : ?>
@@ -181,6 +224,7 @@ $media = $block->getMedia()['data'];
                                     </svg>
                                 </div>
                             </div>
+                        </div>
                         <?php endforeach; ?>
                     </div>
                 </div>
@@ -193,14 +237,14 @@ $media = $block->getMedia()['data'];
 <div class="joshine-model-warp" style="display: none;" id="instagram-modal">
     <div class="joshine-mask"></div>
     <div class="j-modal j-modal-vertical">
-        <div class="j-modal-dialog j-modal-fluid">
+        <div class="j-modal-dialog j-modal-fluid joshine-col-lg-7 joshine-col-md-7 joshine-col-xs-11">
             <div class="j-modal-content">
 
                 <div class="j-modal-body">
                     <div class="row">
-                        <div class="joshine-col-xs-7 joshine-text-center instagram-media-modal-wrapper">
+                        <div class="joshine-col-md-7 joshine-col-xs-12 joshine-text-center instagram-media-modal-wrapper">
                         </div>
-                        <div class="joshine-col-xs-5 instagram-content-wrapper">
+                        <div class="joshine-col-md-5 joshine-col-xs-12  instagram-content-wrapper">
                             <div class="instagram-content-head">
                                 <div class="instagram-view-on">
                                     View on <a target="_blank" class="i1wejPu-"
@@ -239,10 +283,10 @@ $media = $block->getMedia()['data'];
             let type    = data.media_type;
             if (type == "VIDEO") {
                 var html = `
-                <video class="instagram-media" src="${media}" controls="" autoplay="true" webkit-playsinline="true" muted="" playsinline="true">Your browser does not support the video tag.</video>`;
+                <video class="instagram-media joshine-center-block" src="${media}" controls="" autoplay="true" webkit-playsinline="true" muted="" playsinline="true">Your browser does not support the video tag.</video>`;
             } else {
                 var html = `
-                <img class="instagram-media" src="${media}">
+                <img class="instagram-media joshine-center-block" src="${media}">
             `;
             }
             $("#instagram-link").attr({"href":""}).attr({"href":link});