feat(SLB-287): update height on mobile

AmazeeLabs · May 3, 2024 · 43a8349 · 43a8349
1 parent f06d8f8
commit 43a8349
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockBackgroundImageCards.tsx b/packages/ui/src/components/Organisms/PageContent/BlockBackgroundImageCards.tsx
@@ -25,10 +25,10 @@ export function BlockBackgroundImageCards(props: BlockImageTeasers) {
 
 export function BlockBackgroundImageCard(props: BlockImageTeaser) {
   return (
-    <div className="p-8 col-span-2 md:col-span-1 text-left h-72 md:h-96 relative bg-gray-900">
+    <div className="p-8 col-span-2 md:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
       {props.image ? (
         <Image
-          className="object-cover w-full h-72 md:h-96 mb-5 absolute top-0 left-0"
+          className="object-cover w-full h-72 lg:h-96 mb-5 absolute top-0 left-0"
           source={props.image.source}
           alt={props.image.alt}
         />

diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
@@ -35,6 +35,9 @@
   content: '' !important;
 }
 
+/* Selects the .block-background-image-cards only when it is the first child of the <div>
+   element immediately following the .default-hero section.
+ */
 .default-hero + div > :first-child.block-background-image-cards {
   @apply mt-2 px-0;
 }