Fix:image height

canopas · Oct 5, 2023 · 9251726 · 9251726
1 parent e0b380f
commit 9251726
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-my-16 xs:tw-my-24 md:!tw-mt-24 md:!tw-mb-0 tw-flex tw-flex-col xll:tw-container"
+    class="tw-my-16 xs:tw-my-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col xll:tw-container"
   >
     <div class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center">
       <h2
@@ -70,13 +70,13 @@
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
     <div
-      class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[500px] lg:tw-h-[1080px]"
+      class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[500px] lg:tw-h-[780px] xl:tw-h-[850px] tw-mt-20"
       v-for="(portfolio, index) in portfolios"
       :key="index"
     >
       <div
         :class="portfolio.row1Background"
-        class="tw-flex tw-flex-col tw-justify-center tw-basis-[50%]"
+        class="tw-flex tw-flex-col tw-justify-center tw-basis-[40%] tw-px-8"
       >
         <div
           class="tw-w-[17rem] lg:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-12"
@@ -94,15 +94,15 @@
       </div>
 
       <div
-        class="tw-flex tw-flex-row tw-basis-[50%] tw-p-8 lg:tw-p-12"
+        class="tw-flex tw-flex-row tw-basis-[60%] tw-p-8 lg:tw-p-12"
         :class="portfolio.row2Background"
       >
         <div class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end">
           <img
             :src="portfolio.image[2]"
             :srcset="`${portfolio.image[2]} 800w`"
             :alt="portfolio.title"
-            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[616px] tw-object-cover"
+            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
             loading="lazy"
           />
         </div>
@@ -111,7 +111,7 @@
             :src="portfolio.image[3]"
             :srcset="`${portfolio.image[3]} 800w`"
             :alt="portfolio.title"
-            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[616px] tw-object-cover"
+            class="tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
             loading="lazy"
           />
         </div>