Fix: Responsive Tiles fossasia#533

src/screen/Home/components/InstrumentCard.styles.js

@@ -18,6 +18,10 @@ export const CustomCard = styled.div`
     box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
       0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   }
+
+  @media only screen and (max-width: 1800px) {
+    margin-top:10px;
+  }
 `;
 
 export const ImageWrapper = styled.div`
@@ -71,4 +75,5 @@ export const VerticalBar = styled.div`
   border-color: #fff;
   border-width: 0px 4px 0px 4px;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%);
+
 `;

src/screen/Home/components/Tabs.js

@@ -13,6 +13,7 @@ import {
 
 const Tabs = () => {
   return (
+
     <TabsContainer>
       <Scrollbars autoHide autoHideTimeout={1000}>
         <TabsRow>

src/screen/Home/components/Tabs.styles.js

@@ -1,22 +1,35 @@
 import styled from 'styled-components';
 
 export const TabsContainer = styled.div`
-  height: calc(100% - 16px);
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin: 0px 0px 16px 0px;
+  margin: 0;
 `;
 
-export const TabsWrapper = styled.div`
-  margin: 16px 16px 0px 0px;
-  width: 98em;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-`;
 export const TabsRow = styled.div`
   display: flex;
+    flex-wrap: wrap;
   justify-content: center;
   align-items: center;
 `;
+
+export const TabsWrapper = styled.div`
+  display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+`;
+
+export const InstrumentCard= styled.div`
+  display: flex;
+      flex-wrap: wrap;
+    justify-content: center;
+   align-items: center;
+  @media only screen and (max-width: 1800px) {
+    display: flex;
+     flex-direction: wrap;
+   justify-content: center;
+   align-items: center;
+  }
+`;
+