feat(references): update direction for small screens

altence · Feb 10, 2022 · 43c21a5 · 43c21a5
1 parent 512028f
commit 43c21a5
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/common/References/References.styles.ts b/src/components/common/References/References.styles.ts
@@ -4,13 +4,18 @@ import React from 'react';
 export const ReferencesWrapper = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: start;
   flex-wrap: nowrap;
   margin-top: ${(props) => `${props.theme.mobileLayout.paddingVertical}`};
 
-  @media only screen and ${(props) => props.theme.media.md} {
-    margin-top: ${(props) => `${props.theme.desktopLayout.paddingVertical}`};
+  @media only screen and ${(props) => props.theme.media.sm} {
+    align-items: center;
+  }
+
+  @media only screen and ${(props) => props.theme.media.xl} {
+    flex-direction: row;
+    justify-content: space-between;
   }
 `;
 
@@ -19,6 +24,11 @@ export const Text = styled.span`
   align-items: center;
   white-space: pre-wrap;
   flex-wrap: wrap;
+  margin-bottom: 1rem;
+
+  @media only screen and ${(props) => props.theme.media.xl} {
+    margin-bottom: 0;
+  }
 `;
 
 export const Icons = styled.div`