The lang in the "html" tag and removing the

"source" tag in the "picture" tag. Change the display flex to display grid in the body and set the width to media queries for the small desktop.
P0wertDev · May 24, 2024 · 24e5754 · 24e5754
1 parent fb33ed3
commit 24e5754
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html>
-<head lang="en">
+<html lang="en">
+<head>
 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,8 +17,7 @@
 <body>
     <main id="global_card" class="global-card">
         <picture class="qr-content-img">
-            <source src="assets/images/image-qr-code.png" type="image/png">
-            <img src="assets/images/image-qr-code.png" alt="Image QR" class="qr-img" type="image/png">
+            <img src="assets/images/image-qr-code.png" alt="Image QR" class="qr-img">
         </picture>
         <div class="qr-content-description">
             <h2 class="qr-title">Improve your front-end skills by building projects</h2>

diff --git a/style.css b/style.css
@@ -11,10 +11,10 @@
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: center;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 5%;
     min-height: 100dvh;
     font-family: "Outfit";
     background: var(--light-gray);
@@ -128,7 +128,7 @@ body {
 
 @media screen and (min-width: 1200px) and (max-width: 1399px) {
     #global_card {
-        width: 25%;
+        width: 30%;
     }
 
     .qr-title {