Update README.md

README.md

@@ -20,24 +20,26 @@ tags:
 
 <style>
 .gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+    display: flex;
+    flex-direction: row;  /* Force horizontal layout */
+    flex-wrap: wrap;      /* Allow wrapping on smaller screens */
     gap: 15px;
     justify-content: center;
-    max-width: 1200px;  /* Limits maximum width to show ~3 images per row */
-    margin: 0 auto;     /* Centers the gallery */
+    align-items: center;
+    width: 100%;
     padding: 15px;
 }
 
+.gallery-item {
+    flex: 0 0 384px;     /* Don't grow, don't shrink, fixed width */
+    margin: 0;
+}
+
 .gallery img {
     width: 384px;
-    height: 384px;
-    object-fit: cover;  /* Maintains aspect ratio */
     cursor: pointer;
     transition: transform 0.2s;
     border-radius: 8px;
-    margin: 0 auto;     /* Centers images in their grid cells */
-    display: block;
 }
 
 .gallery img:hover {
@@ -65,7 +67,6 @@ tags:
     position: relative;
     top: 50%;
     transform: translateY(-50%);
-    object-fit: contain;  /* Maintains aspect ratio in modal */
 }
 
 .modal.active {
@@ -74,11 +75,21 @@ tags:
 </style>
 
 <div class="gallery">
-    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
-    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
-    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
-    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
-    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
+    <div class="gallery-item">
+        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
+    </div>
+    <div class="gallery-item">
+        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
+    </div>
+    <div class="gallery-item">
+        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
+    </div>
+    <div class="gallery-item">
+        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
+    </div>
+    <div class="gallery-item">
+        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
+    </div>
 </div>
 
 <div class="modal" onclick="this.classList.remove('active')">