fix mobile issue with skills

luthfib · luthfib · commit 14283f31f585 · 2022-02-06T22:35:20.000-05:00
diff --git a/components/experience/data-engineer/data-engineer.module.scss b/components/experience/data-engineer/data-engineer.module.scss
@@ -25,6 +25,10 @@
   -moz-column-gap: 7.5rem;
   column-gap: 7.5rem;
   justify-content: inherit;
+
+  @media (max-width: 750px) {
+    grid-template-columns: repeat(2, auto);
+  }
 }
 
 .skillSection {
diff --git a/components/experience/data-engineer/index.js b/components/experience/data-engineer/index.js
@@ -37,7 +37,7 @@ const Skills = ({ width, height }) => {
     <div
       ref={ref}
       className={styles.skillsGrid}
-      style={{ width: `${width}px `, height: `${height}px ` }}
+      style={{ width: `${width}px` }}
     >
       <div className={styles.skillSection}>
         <h3>Python Frameworks</h3>

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const Skills = ({ width, height }) => {`
`37`	`37`	`<div`
`38`	`38`	`ref={ref}`
`39`	`39`	`className={styles.skillsGrid}`
`40`		- style={{ width: `${width}px `, height: `${height}px ` }}
	`40`	+ style={{ width: `${width}px` }}
`41`	`41`	`>`
`42`	`42`	`<div className={styles.skillSection}>`
`43`	`43`	`<h3>Python Frameworks</h3>`