From 907774e948df95be7d76f7ad3aa35a05684e2d2e Mon Sep 17 00:00:00 2001
From: Arina Filatova <a.filatova@student.maastrichtuniversity.nl>
Date: Sun, 29 Sep 2024 23:18:42 +0000
Subject: [PATCH] upd notion pics
---
docs/.vuepress/components/Contribution.vue | 19 +++++++++----------
1 file changed, 9 insertions(+), 10 deletions(-)
diff --git a/docs/.vuepress/components/Contribution.vue b/docs/.vuepress/components/Contribution.vue
index ddf0114..0f3687e 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>
--
GitLab