fix: loading center

index.html

@@ -25,7 +25,7 @@ <h1>ESSA</h1>
     </section>
 
 
-    <section class="gallery">
+    <section class="gallery grid">
       <div class="gallery__loading">
         <img src="assets/spinner.svg" alt="loading" />
         <h1>Loading...</h1>

script.js

@@ -35,6 +35,7 @@ function createMedia(media) {
 }
 function hideMediasLoading() {
   const loading = document.querySelector(".gallery__loading");
+  gallerySect.classList.remove("grid");
   loading.style.display = "none";
 }
 getMedias();
@@ -52,7 +53,8 @@ function createInfos([url, type, id, uploadDate, author]) {
   <div class="img__info">
     <p><b>Type:</b> ${type}</p>
     <p><b>ID:</b> ${id}</p>
-    <p><b>Upload Date:</b> ${uploadDate}</p>
+    <p-+><b>Upload Date:</b> ${uploadDate}</p-+
+    
     <p><b>Author:</b> ${author}</p>
   </div>`;
 }

style.css

@@ -17,27 +17,24 @@ header {
   }
 } */
 
-
-
+.grid {
+  display: grid;
+  place-content: center;
+}
 .gallery {
-  width: 100%;
-  margin: 0 auto;
-  columns: 3;
-
+  columns: 300px;
   min-height: 100vh;
   padding: 2rem;
-
   & .media__container {
-
-    break-inside: avoid;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     margin-bottom: 0.5rem;
+    object-fit: contain;
     & img {
+      scale: 1.1;
       border-radius: 2px;
       width: 100%;
-
     }
     & .media__button {
       position: absolute;
@@ -53,8 +50,8 @@ header {
       -o-transform: translateY(-50%) translateX(-50%);
     }
     &:hover img {
-      scale: 1.1;
       transition: 500ms;
+      scale: 1.2;
       border-radius: 2px;
       filter: brightness(0.5);
       -webkit-filter: brightness(0.5);
@@ -72,6 +69,11 @@ header {
       -o-transition: 400ms cubic-bezier(0, 2, 1, 1);
     }
   }
+  @media (width <= 700px) {
+    & {
+      columns: 2;
+    }
+  }
 }
 .media__modal {
   background-color: #fff;
@@ -106,12 +108,6 @@ header {
   }
 }
 
-@media (max-width: 800px) {
-  .gallery {
-    columns: 2;
-  }
-}
-
 .gallery__loading {
   text-align: center;
   & img {