From 80c2423cc07b1872b12123c3c1b791d328064429 Mon Sep 17 00:00:00 2001
From: Maija Y <maija.ylitalo@helsinki.fi>
Date: Tue, 10 Oct 2023 16:13:42 +0300
Subject: [PATCH] fixed mobile view

---
 .../src/app/page.tsx                          | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/matrix-linear-trasformation-visualization/src/app/page.tsx b/matrix-linear-trasformation-visualization/src/app/page.tsx
index d8e84e7..0082d5c 100644
--- 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>