Fix image placement issue

LefanTan · Jul 5, 2023 · 52194eb · 52194eb
1 parent 6b35c93
commit 52194eb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/client/components/project.vue b/client/components/project.vue
@@ -16,7 +16,7 @@ defineProps<{
     :to="project.link ?? '/#projects'"
   >
     <h4 class="font-sans text-3xl">{{ project.name }}</h4>
-    <figcaption class="font-normal text-base line-clamp-2 mb-4">
+    <figcaption class="font-normal text-base line-clamp-2 sm:h-12 mb-4">
       {{ project.description }}
     </figcaption>
     <nuxt-img

diff --git a/client/pages/index.vue b/client/pages/index.vue
@@ -127,8 +127,8 @@ function onMessageSubmit(e: Event) {
       </div>
       <div class="divider" />
 
-      <ul class="flex flex-wrap gap-8 mt-8">
-        <li class="flex-1 min-w-[20rem]" v-for="project in projects">
+      <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 mt-8">
+        <li class="flex min-w-[20rem]" v-for="project in projects">
           <project :project="project" />
         </li>
       </ul>