Add height screen size

canopas · Oct 9, 2023 · 9860210 · 9860210
1 parent 669eea6
commit 9860210
Showing 1 changed file with 12 additions and 19 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -69,7 +69,7 @@
     </div>
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
-    <div class="tw-hidden md:tw-block">
+    <div class="tw-hidden md:tw-block tw-relative">
       <swiper
         :direction="'vertical'"
         :slidesPerView="1"
@@ -79,12 +79,12 @@
         :speed="2000"
         :loop="true"
         :modules="modules"
-        class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] xll:tw-h-[780px] tw-mt-20"
+        class="swiper-container tw-h-screen tw-mt-20 !tw-sticky tw-top-0"
         @swiper="setSwiperRef"
       >
         <swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
           <div
-            class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] xll:tw-h-[780px]"
+            class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-screen"
           >
             <div
               :class="portfolio.row1Background"
@@ -108,10 +108,12 @@
                 >
                   {{ portfolio.desktopDescription }}
                 </h2>
-                <span
-                  class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
-                  >{{ portfolio.subDescription }}</span
-                >
+                <div class="tw-mt-6">
+                  <span
+                    class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem]"
+                    >{{ portfolio.subDescription }}</span
+                  >
+                </div>
               </div>
               <div
                 @click="$emit('scroll-to-next')"
@@ -125,11 +127,11 @@
             </div>
 
             <div
-              class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
+              class="tw-flex tw-flex-row !tw-basis-[60%] tw-items-center tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
               :class="portfolio.row2Background"
             >
               <div
-                class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp"
+                class="tw-basis-[50%] tw-mt-48 tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp"
               >
                 <img
                   :src="portfolio.image[2]"
@@ -140,7 +142,7 @@
                 />
               </div>
               <div
-                class="tw-flex tw-flex-col tw-basis-[50%] animate__animated animate__fadeInUp"
+                class="tw-flex tw-flex-col tw--mt-32 tw-basis-[50%] animate__animated animate__fadeInUp"
               >
                 <img
                   :src="portfolio.image[3]"
@@ -240,14 +242,6 @@ export default {
     setSwiperRef(swiper) {
       this.swiperRef = swiper;
     },
-    // slideTo(activeIndex) {
-    //   this.activeIndex = this.swiperRef.activeIndexIndex;
-    //   this.nextIndex = activeIndex + 1;
-    //   if (this.nextIndex >= 3) {
-    //     this.nextIndex = 0;
-    //   }
-    //   this.swiperRef.slideToLoop(this.nextIndex);
-    // },
   },
   components: {
     Swiper,
@@ -257,7 +251,6 @@ export default {
 </script>
 <style lang="postcss" scoped>
 @import "swiper/css";
-@import "swiper/css/effect-fade";
 .swiper-container {
   @apply tw-mx-0;
 }