Remove unused space from mobile devices

canopas · Oct 6, 2023 · 4714926 · 4714926
1 parent ed0b244
commit 4714926
Showing 1 changed file with 74 additions and 72 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -69,95 +69,97 @@
     </div>
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
-    <swiper
-      :slidesPerView="1"
-      :centeredSlides="true"
-      :spaceBetween="0"
-      :effect="'fade'"
-      :autoplay="{
-        delay: 2000,
-        disableOnInteraction: false,
-      }"
-      :speed="2000"
-      :loop="true"
-      :modules="modules"
-      class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
-    >
-      <swiper-slide
-        v-for="(portfolio, index) in portfolios"
-        :key="index"
-        class="tw-cursor-pointer"
+    <div class="tw-hidden md:tw-block">
+      <swiper
+        :slidesPerView="1"
+        :centeredSlides="true"
+        :spaceBetween="0"
+        :effect="'fade'"
+        :autoplay="{
+          delay: 2000,
+          disableOnInteraction: false,
+        }"
+        :speed="2000"
+        :loop="true"
+        :modules="modules"
+        class="swiper-container tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
       >
-        <div
-          class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px]"
+        <swiper-slide
+          v-for="(portfolio, index) in portfolios"
+          :key="index"
+          class="tw-cursor-pointer"
         >
           <div
-            :class="portfolio.row1Background"
-            class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
+            class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px]"
           >
-            <div class="tw-flex tw-justify-end tw-relative">
+            <div
+              :class="portfolio.row1Background"
+              class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
+            >
+              <div class="tw-flex tw-justify-end tw-relative">
+                <div
+                  :class="portfolio.row1Background"
+                  class="tw-absolute tw-top-[2rem] lg:tw-top-[1rem] xl:tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-20%] 2xll:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
+                >
+                  <h2
+                    class="animate__animated animate__fadeInUp tw-duration-1000"
+                  >
+                    {{ portfolio.title }}
+                  </h2>
+                </div>
+              </div>
               <div
-                :class="portfolio.row1Background"
-                class="tw-absolute tw-top-[2rem] lg:tw-top-[1rem] xl:tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-20%] 2xll:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
+                class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 animate__animated animate__fadeInUp tw-duration-1000"
               >
                 <h2
-                  class="animate__animated animate__fadeInUp tw-duration-1000"
+                  class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
                 >
-                  {{ portfolio.title }}
+                  {{ 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>
+              <div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
+                <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"
+                  >SKIP</span
+                >
               </div>
             </div>
+
             <div
-              class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 animate__animated animate__fadeInUp tw-duration-1000"
+              class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
+              :class="portfolio.row2Background"
             >
-              <h2
-                class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
-              >
-                {{ 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-basis-[50%] tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp tw-duration-1000"
               >
-            </div>
-            <div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
-              <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"
-                >SKIP</span
+                <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-[490px] xl:tw-h-[590px] tw-object-cover"
+                  loading="lazy"
+                />
+              </div>
+              <div
+                class="tw-flex tw-flex-col tw-basis-[50%] animate__animated animate__fadeInUp tw-duration-1000"
               >
+                <img
+                  :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-[490px] xl:tw-h-[590px] tw-object-cover"
+                  loading="lazy"
+                />
+              </div>
             </div>
           </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="portfolio.row2Background"
-          >
-            <div
-              class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end animate__animated animate__fadeInUp tw-duration-1000"
-            >
-              <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-[490px] xl:tw-h-[590px] tw-object-cover"
-                loading="lazy"
-              />
-            </div>
-            <div
-              class="tw-flex tw-flex-col tw-basis-[50%] animate__animated animate__fadeInUp tw-duration-1000"
-            >
-              <img
-                :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-[490px] xl:tw-h-[590px] tw-object-cover"
-                loading="lazy"
-              />
-            </div>
-          </div>
-        </div>
-      </swiper-slide>
-    </swiper>
+        </swiper-slide>
+      </swiper>
+    </div>
   </div>
 </template>