mobile compatibility on chromium browsers fix

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>

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;
     }

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;
   }
 }