Making WordPress.org

Ticket #6651: 6651.diff

File 6651.diff, 1.5 KB (added by naeemhaque, 17 months ago)

Resolved Image carousel responsive design issue

  • src/pages/index.vue

    diff --git a/src/pages/index.vue b/src/pages/index.vue
    index e5eef78d..13925171 100644
    a b  
    66    </div>
    77
    88    <main
    9       class="flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
    10       :class="{ 'h-screen overflow-hidden': !isNewHeaderEnabled }"
     9      class="flex w-full flex-shrink-0 flex-grow flex-col justify-start md:justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
     10      :class="{ 'lg:h-screen lg:overflow-hidden': !isNewHeaderEnabled }"
    1111    >
    1212      <!-- TODO: Refine min-width for different breakpoints, remove magic numbers -->
    1313      <header
     
    110110      />
    111111      <div
    112112        v-else
    113         class="w-full flex-grow overflow-hidden px-6 lg:h-full lg:w-auto"
     113        class="w-full flex-grow px-6 lg:h-full lg:w-auto"
    114114        data-testid="image-carousel"
    115115      >
    116116        <!-- Height is 114.286vh i.e. 100vh * 8/7 (so that 0.75, 1, 1, 0.75 circles are visible) -->
    117117        <!-- Width is 57.143vh i.e. half of height (because grid dimensions are 4 ⨯ 2) -->
    118118        <div
    119           class="homepage-images flex min-h-[120px] flex-row items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
     119          class="homepage-images flex flex-wrap min-h-[120px] flex-row  sm:justify-center items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
    120120          aria-hidden
    121121        >
    122122          <ClientOnly>