Merge pull request #129 from Vizzuality/SKY30-178-lp-2-fix-link-cards…

…-display-on-safari [SKY30-178] Fix Safari display (homepage intro, homepage link cards, about/knowledge hub intro)
Vizzuality · Jan 15, 2024 · 7464c5c · 7464c5c
2 parents a604819 + 9124dd7
commit 7464c5c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/frontend/src/components/static-pages/intro/index.tsx b/frontend/src/components/static-pages/intro/index.tsx
@@ -49,14 +49,14 @@ const Intro: React.FC<IntroProps> = ({
       <div className="w-full border-l border-r border-black md:w-[40%]">
         <div className="flex h-full flex-col">
           <span
-            className="aspect-square max-h-[200px] border-b border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-full"
+            className="aspect-[1.8] max-h-[160px] w-full flex-shrink-0 border-b border-t border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-[70%] md:border-t-0"
             style={{
               backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
             }}
           />
-          <div className="flex h-full max-h-[140px] w-full justify-center py-6 md:max-h-[50%] md:min-h-0">
+          <div className="flex aspect-[1.8] h-full max-h-[140px] w-full justify-center md:max-h-[50%] md:min-h-0">
             <button
-              className="flex w-full items-center justify-center md:w-auto"
+              className="my-6 flex aspect-square items-center justify-center md:w-auto"
               type="button"
               onClick={onScrollClick}
             >

diff --git a/frontend/src/containers/homepage/intro/index.tsx b/frontend/src/containers/homepage/intro/index.tsx
@@ -115,8 +115,12 @@ const Intro: React.FC<IntroProps> = ({ onScrollClick }) => {
               icon="icon2"
             />
             <div className="flex h-full w-full justify-center">
-              <button type="button" onClick={onScrollClick}>
-                <Icon icon={ArrowRight} className="h-[50%] rotate-90 fill-black" />
+              <button
+                type="button"
+                className="my-6 flex aspect-square min-h-[140px] items-center justify-center md:w-auto"
+                onClick={onScrollClick}
+              >
+                <Icon icon={ArrowRight} className="h-[60%] rotate-90 fill-black" />
               </button>
             </div>
           </div>

diff --git a/frontend/src/containers/homepage/link-cards/link-card/index.tsx b/frontend/src/containers/homepage/link-cards/link-card/index.tsx
@@ -49,7 +49,7 @@ const LinkCard: React.FC<LinkCardProps> = ({
     </div>
     <div className="flex flex-1 flex-col">
       <span
-        className="aspect-square max-h-[160px] border-b border-t border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-full md:border-t-0"
+        className="aspect-square max-h-[160px] w-full flex-shrink-0 border-b border-t border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-[70%] md:border-t-0"
         style={{
           backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
         }}