diff --git a/docs/.vuepress/components/Contribution.vue b/docs/.vuepress/components/Contribution.vue index ddf0114326d94aa4da6dd9d4ca0c59af3487d347..0f3687e5f97d29c0c6be8ff13a81ca22cd30376f 100644 --- a/docs/.vuepress/components/Contribution.vue +++ b/docs/.vuepress/components/Contribution.vue @@ -165,9 +165,9 @@ <a href="https://curvy-caribou-2c5.notion.site/iGEM-Notion-11010f1720c0805d8e12f4e8b2943349?pvs=4" target="_blank">Click here to view the Notion template</a>. </p> <!-- Display three images side by side --> - <div class="image-row"> + <div class="image-column"> <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-42-12.webp" alt="Screenshot 1 of Notion template" class="image-item" /> - <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-43-14.webp" class="image-item" /> + <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-43-14.webp" alt="Screenshot 2 of Notion template" class="image-item" /> <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-44-44-2.webp" alt="Screenshot 3 of Notion template" class="image-item" /> </div> </div> @@ -268,16 +268,15 @@ h1, h3 { margin-top: 10px; } -.image-row { - display: flex; - justify-content: space-between; - margin-top: 1em; +.image-column { + /* This class can be omitted as images will stack vertically by default */ + margin-top: 1em; /* Optional: Adds spacing above the images */ } .image-item { - width: 30%; /* Adjust this to control the image size */ - height: auto; - border: 1px solid #ccc; - border-radius: 4px; + width: 100%; /* Make images full width of the container */ + height: auto; /* Maintain aspect ratio */ + margin-bottom: 1em; /* Adds spacing between images */ + border: 1px solid #ccc; /* Optional: Add border for visual separation */ } </style>