Merge pull request #19 from fi-naskoc/fix/schedule_images

fix: images on mobile

Author: michalspiegel

src/app/components/root/page-schedule/page-schedule.component.html

@@ -23,14 +23,12 @@ <h2 id="harmonogram">Harmonogram</h2>
 Interaktivní harmonogram je k dispozici jako PDF <a href="https://fi.muni.cz/files/fi-graphics/naskoc-na-fi-2025-program.pdf"><b>zde na webu fakulty</b></a>. Kliknutím na časový slot se dostaneš přímo na zapisování daného workshopu v ISu – toto zapisování seminárních skupin běží od 3. 9. 17:00. Kliknutím na místnost workshopu se ti otevře detail místnosti s mapou v ISu.
 </p>
 
-<img src="assets/img/schedule/Naskoc program 1.png">
-
-<img src="assets/img/schedule/Naskoc program 2.png">
-
-<img src="assets/img/schedule/Naskoc program 3.png">
-
-<img src="assets/img/schedule/Naskoc program 4.png">
-
-<img src="assets/img/schedule/Naskoc program 5.png">
+<div class="schedule-container">
+    <img src="assets/img/schedule/Naskoc program 1.png" alt="Schedule part 1" class="schedule-image">
+    <img src="assets/img/schedule/Naskoc program 2.png" alt="Schedule part 2" class="schedule-image">
+    <img src="assets/img/schedule/Naskoc program 3.png" alt="Schedule part 3" class="schedule-image">
+    <img src="assets/img/schedule/Naskoc program 4.png" alt="Schedule part 4" class="schedule-image">
+    <img src="assets/img/schedule/Naskoc program 5.png" alt="Schedule part 5" class="schedule-image">
+</div>
 
 </div>

src/app/components/root/page-schedule/page-schedule.component.scss

@@ -31,8 +31,22 @@
   .schedule p {
       width: 60%;
   }
-  .schedule ifram {
-      width: 60%;
+  .schedule-container {
+    /* This ensures the container doesn't exceed the width of the viewport */
+    max-width: 100%;
+    /* This will help if you have a flex container parent */
+    width: 100%;
+  }
+
+  .schedule-image {
+    /* This makes the image scale down if the container is smaller */
+    max-width: 100%;
+    /* This maintains the aspect ratio of the image */
+    height: auto;
+    /* This displays the image as a block element, which allows margin auto to work for centering if needed */
+    display: block;
+    /* Adds some space between the images */
+    margin-bottom: 1rem; /* Adjust as needed */
   }
 }