Template:Testy: Difference between revisions

Revision as of 23:00, 20 June 2024

 display: flex;
 flex-wrap: wrap;

}

/* Style the images within the container */ .image-container img {

 width: 100%; /* Make the images fill the container width */
 height: auto; /* Maintain aspect ratio */

}

/* Use media queries to adjust the layout for mobile screens */ @media only screen and (max-width: 600px) {

 .image-container {
   flex-direction: column; /* Stack images vertically on smaller screens */
 }

} </style>

@@ Line 1: / Line 1: @@
-<div style> display: flex; flex-wrap: wrap; width: 100%; height: auto; flex-direction: row; justify-content: center;">
+<style>
-     <div style="flex: 0 2 20%; display: flex; justify-content: center; align-items: center;">
+/* Define a flex container for the 6 images */
-    </div>
+.image-container {
-</div>
+  display: flex;
+  flex-wrap: wrap;
+}
+/* Style the images within the container */
+.image-container img {
+  width: 100%; /* Make the images fill the container width */
+  height: auto; /* Maintain aspect ratio */
+}
+/* Use media queries to adjust the layout for mobile screens */
+@media only screen and (max-width: 600px) {
+  .image-container {
+     flex-direction: column; /* Stack images vertically on smaller screens */
+  }
+}
+</style>