From d1948c5fe9eac8cd94f55c268ccc24b1d9793ed1 Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Wed, 23 Jun 2021 18:50:17 +0200
Subject: [PATCH] mobile compatibility on chromium browsers fix

---
 pages/index.js          |  4 +++-
 styles/Index.module.css | 17 ++++++++++++-----
 styles/globals.css      |  9 ++++++---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 90b8aab..1e6c299 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -29,7 +29,9 @@ export default function Index() {
 
                 <section className="card">
                     <div className={styles.avatar}>
-                        <img src="/trickwow.png"></img>
+                        <div className={styles.icon}>
+                            <img src="/trickwow.png"></img>
+                        </div>
                         <div>
                             <h1>Hi, I'm Trick!</h1>
                             <h4><RandomMotto /></h4>
diff --git a/styles/Index.module.css b/styles/Index.module.css
index 041eee8..5699a86 100644
--- a/styles/Index.module.css
+++ b/styles/Index.module.css
@@ -12,21 +12,24 @@
     font-weight: normal;
 }
 
-.avatar > img {
+.avatar > .icon {
+    width: 25%;
+    transition-duration: 0.3s;
+}
+
+.avatar > .icon > img {
     box-shadow: var(--box-shadow);
     border-radius: 100%;
-    max-width: 100%;
-    transition-duration: 0.3s;
 }
 
-.avatar > img:hover {
+.avatar > .icon:hover {
     transition-duration: 0.3s;
     transform: scale(1.1) rotate(-20deg);
 }
 
 
 /* mobile */
-@media (max-aspect-ratio: 1/1) {
+@media (max-aspect-ratio: 4/5) {
     .avatar {
         flex-direction: column;
         height: unset;
@@ -34,6 +37,10 @@
         gap: unset;
     }
 
+    .avatar > .icon {
+        width: 100%;
+    }
+
     .avatar h1 {
         font-size: 1.5em;
     }
diff --git a/styles/globals.css b/styles/globals.css
index 5cc4290..b671ddf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -55,7 +55,7 @@ hr {
 }
 
 .container {
-  width: 1200px;
+  width: 100%;
   margin: 0 auto;
 }
 
@@ -87,10 +87,13 @@ hr {
   .content {
     flex-direction: column;
   }
+  .container {
+    width: 100%;
+  }
 }
 
-@media(max-width: 1200px) {
+@media(min-width: 1200px) {
   .container {
-    width: 100%;
+    max-width: 1200px;
   }
 }
\ No newline at end of file