Better CSS

static/css/main.css

@@ -2519,49 +2519,52 @@ button:disabled,
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   position: relative;
+  display: flex;
+  justify-content: center; /* Centrer horisontalt */
+  align-items: center; /* Centrer vertikalt */
+  flex-direction: column; /* Placer knapper under billedet */
   min-width: 70vw;
   min-height: 70vh;
   max-width: 95vw;
   max-height: 95vh;
   overflow: auto;
-  justify-content: center; /* Centrer billedet i modal horisontalt */
-  align-items: center; /* Centrer billedet i modal vertikalt */
-  flex-direction: column; /* Knapper placeres nedenunder billedet */
 }
 .modal-content img {
+  display: block;
   height: auto;
-  max-width: 90vw;
-  max-height: 90vh;
-  object-fit: contain;
+  max-width: 95%; /* Maks bredde på 90% af modalens bredde */
+  max-height: 78vh; /* Maks højde på 80% af viewporten */
+  margin-bottom: 20px;
+  object-fit: contain; /* Skaler billedet korrekt */
   border-radius: 15px;
-  margin: 0 auto;
+  margin: 0 auto; /* Som ekstra sikkerhed */
 }
 .modal-content .modal-buttons {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  justify-content: center;
-  position: relative;
-  margin-top: 20px;
+  gap: 15vh;
+  background-color: #ffffff;
 }
 .modal-content .modal-buttons button {
-  position: relative; /* Tillader z-index at tage effekt */
-  margin: 20px;
+  border: none;
+  border-radius: 5px;
   cursor: pointer;
-  transition: transform 0.3s ease, z-index 0.3s ease;
+  transition: background-color 0.3s ease, transform 0.2s ease;
 }
 .modal-content .modal-buttons button:hover {
   transform: scale(1.05);
-  z-index: 3; /* Hæver knappen øverst ved hover */
 }
 .modal-content .close-btn {
-  position: absolute;
   transform: translateX(-50%);
   cursor: pointer;
+  margin-left: 5vw;
 }
 
 .next-btn {
   cursor: pointer;
-  position: absolute;
-  right: 20px;
   transition: background-color 0.3s ease;
 }
 

static/sass/components/_modals.scss

@@ -55,54 +55,57 @@ $button-color: #000;
   padding: 5px;
   border-radius: 8px;
   box-shadow: $modal-content-shadow;
-  position: relative;
+  position: relative; // Referenceramme til knapper med absolute positioning
+  display: flex; // Aktivér Flexbox
+  justify-content: center; /* Centrer horisontalt */
+  align-items: center; /* Centrer vertikalt */
+  flex-direction: column; /* Placer knapper under billedet */
   min-width: 70vw;
   min-height: 70vh;
-  max-width: 95vw; // Maks bredde på 90% af viewportens bredde
-  max-height: 95vh; // Maks højde på 90% af viewportens højde
-  overflow: auto; // Tilføj scroll, hvis indholdet bliver for stort
-  justify-content: center; /* Centrer billedet i modal horisontalt */
-  align-items: center; /* Centrer billedet i modal vertikalt */
-  flex-direction: column; /* Knapper placeres nedenunder billedet */
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+
   img {
+    display: block; // Sørg for, at img ikke har default inline opførsel
     height: auto;
-    max-width: 90vw; // Maks bredde på 90% af viewportens bredde
-    max-height: 90vh; // Maks højde på 90% af viewportens højde
-    object-fit: contain;
+    max-width: 95%; /* Maks bredde på 90% af modalens bredde */
+    max-height: 78vh; /* Maks højde på 80% af viewporten */
+    margin-bottom: 20px;
+    object-fit: contain; /* Skaler billedet korrekt */
     border-radius: 15px;
-    margin: 0 auto;
+    margin: 0 auto; /* Som ekstra sikkerhed */
   }
 
+
   // Modal knapper (bevarer globale værdier)
   .modal-buttons {
+    position: absolute; // Fastgør knapperne relativt til modal-content
+    bottom: 20px; // Afstand fra bunden af modal
+    left: 50%; // Centrerer containeren horisontalt
+    transform: translateX(-50%); // Juster for centrering
     display: flex;
-    justify-content: center;
-    position: relative;
-    margin-top: 20px;
-
+    gap: 15vh;
+    background-color: #ffffff;
     button {
-      position: relative; /* Tillader z-index at tage effekt */
-      margin: 20px;
+      border: none;
+      border-radius: 5px;
       cursor: pointer;
-      transition: transform 0.3s ease, z-index 0.3s ease;
-
+      transition: background-color 0.3s ease, transform 0.2s ease;
       &:hover {
         transform: scale(1.05);
-        z-index: 3; /* Hæver knappen øverst ved hover */
       }
     }
   }
 
   .close-btn {
-    position: absolute;
     transform: translateX(-50%);
     cursor: pointer;
+    margin-left: 5vw;
   }
 }
   .next-btn {
     cursor: pointer;
-    position: absolute;
-    right: 20px;
     transition: background-color 0.3s ease;
     }
 // Thumbnail styling (forsiden)