fixed mobile view

rage · Oct 10, 2023 · 80c2423 · 80c2423
1 parent 81e5bc3
commit 80c2423
Showing 1 changed file with 18 additions and 17 deletions.
diff --git a/matrix-linear-trasformation-visualization/src/app/page.tsx b/matrix-linear-trasformation-visualization/src/app/page.tsx
@@ -12,16 +12,11 @@ const Page: React.FC<React.PropsWithChildren> = () => {
 
   return (
     <div>        
-      <h1 className={css`
-        font-size: 40px;
-      `}>
-        Matrix
-      </h1>
-
       <div className={css`
         display: flex;
-        flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
+
       `}>
 
       <div className={css`
@@ -78,17 +73,21 @@ const Page: React.FC<React.PropsWithChildren> = () => {
             alt="Picture of a fruitbowl" 
           />
         </div>
-        <p className={css`
-          padding: 8px;
-        `}> = </p>
+        <div className={css`
+            display: flex;
+            align-items: center;
+          `}>
+          <p className={css`
+            padding: 8px;
+          `}> = </p>
 
-        <div className={css` 
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          overflow: hidden;
-          width: 150px;
-          height: 150px;
+          <div className={css` 
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            width: 150px;
+            height: 150px;
           `}>
           <img src="https://rage.github.io/introduction-to-matrix-calculus/static/c4b8116295cab8e3c208d824de6ffd01/5a46d/hedelmat.png"
             alt="Matrix linear transformation visualization"
@@ -98,6 +97,8 @@ const Page: React.FC<React.PropsWithChildren> = () => {
             transform: matrix(${a}, ${b}, ${c} , ${d}, 0, 0);          
             `}
           />
+        </div>
+
 
         </div>