From 21c21d4f089a75db3fbc8ce2b8c6596bfdd3a6fb Mon Sep 17 00:00:00 2001
From: Caio Thurler <caiothurlerrr@gmail.com>
Date: Thu, 13 Oct 2022 16:21:04 -0300
Subject: [PATCH] bugfix(css/html): media query sizes

---
 index.html |  2 +-
 styles.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 25bbe24..3a599ef 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 
     <main>
         <picture>
-            <source media="(max-width:414px)" srcset="images/mainpostersmall.png">
+            <source media="(max-width:425px)" srcset="images/mainpostersmall.png">
             <img class="main-poster" src="images/mainposter.jpg" alt="Banner Laptop">
         </picture>
         <section>
diff --git a/styles.css b/styles.css
index 31c33aa..8dc812a 100644
--- a/styles.css
+++ b/styles.css
@@ -48,6 +48,7 @@ header {
     font-weight: 400;
     font-size: 32px;
     width: 220px;
+    max-width: 100%;
     height: 39px;
 }
 
@@ -56,6 +57,7 @@ header {
     font-weight: 500;
     font-size: 48px;
     width: 403px;
+    max-width: 100%;
     height: 58px;
     margin-bottom: 28px;
 }
@@ -65,12 +67,14 @@ header {
     font-size: 16px;
     line-height: 24px;
     width: 766px;
+    max-width: 100%;
     height: 56px;
     margin-bottom: 73px;
 }
 
 .computadores {
     width: 315.5;
+    max-width: 100%;
     height: 315;
     margin-bottom: 178.5px;
 }
@@ -126,6 +130,7 @@ header {
 
 .laptop-img {
     width: 566px;
+    max-width: 100%;
     height: 530px;
     margin-bottom: 129px;
 }
@@ -142,6 +147,7 @@ header {
     display: flex;
     flex-direction: column;
     width: 432px;
+    max-width: 100%;
     height: 332px;
     gap: 21px;
     background: #FFFFFF;
@@ -149,9 +155,16 @@ header {
     margin-bottom: 108px;
 }
 
-.card-logo-2-1, .card-logo-2-2, .card-logo-2-3, .card-logo-2-4{
+.card-logo-2-1, .card-logo-2-2, .card-logo-2-3{
     display: block;
     width: 104px;
+    max-width: 100%;
+    height: 104px;
+}
+.card-logo-2-4{
+    display: block;
+    width: 85px;
+    max-width: 100%;
     height: 104px;
 }
 
@@ -159,6 +172,7 @@ header {
     font-size: 16px;
     font-weight: 400;
     width: 367px;
+    max-width: 100%;
     height: 95px;
     line-height: 24px;
     text-align: center;
@@ -180,6 +194,7 @@ header {
     font-weight: 400;
     font-size: 16px;
     width: 550px;
+    max-width: 100%;
     text-align: center;
     margin-bottom: 50px;
 }
@@ -197,6 +212,7 @@ header {
 .end-image {
     margin-top: 50px;
     width: 70.83%;
+    max-width: 100%;
     height: 276px;
     margin-bottom: 116px;
 }
@@ -246,7 +262,7 @@ footer {
     .computadores {width: 239px; height: 239.38px; margin-bottom: 90.62px;}
 
     .cards-1 {flex-direction: column; gap: 24px;}
-    .card-1-1, .card-1-2, .card-1-3 {width: 350px; height: 287px;}
+    .card-1-1, .card-1-2, .card-1-3 {width: 350px; height: 287px; max-width: 100%;}
     .card-1-text {line-height: 24px;}
 
     .laptops-img-div {flex-wrap: wrap; margin-left: 0; margin-right: 0; gap: 14px;}
@@ -262,14 +278,42 @@ footer {
 
     .info-2 {flex-direction: column-reverse;}
     .end-image {margin-top: 98px; width: 100%; height: auto; margin-bottom: 50px;}
-    .titulo-2 {margin-bottom: 9px; width: 315px; height: 29px; font-size: 24px; line-height: 29.05px;}
-    .titulo-2-texto {margin-bottom: 87px; width: 350px; height: 192px; font-size: 16px; line-height: 24px;}
+    .titulo-2 {margin-bottom: 9px; width: 315px; max-width: 100%; height: 29px; font-size: 24px; line-height: 29.05px;}
+    .titulo-2-texto {margin-bottom: 87px; width: 350px; max-width: 100%; height: 192px; font-size: 16px; line-height: 24px;}
 
     .footer-div {display: flex; flex-direction: column; height: 64px;}
     .footer-imgs {margin-bottom: 16px;}
-    .footer-text {width: 261px; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
+    .footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
 }
 
+@media screen and (max-width: 425px) {
+.titulo-2 {margin-bottom: 9px; width: 265px; max-width: 100%; height: 29px; font-size: 20px; line-height: 25.05px;}
+.titulo-2-texto {margin-bottom: 47px; width: 260px; max-width: 100%; height: 232px; font-size: 12px; line-height: 16px;}
+
+.footer-div {display: flex; flex-direction: column; height: 64px;}
+.footer-imgs {margin-bottom: 16px;}
+.footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
+}
+
+@media screen and (min-width: 992px) {
+    .titulo-2 {margin-bottom: 9px; width: fit-content; max-width: 100%; height: 29px; line-height: 25.05px; font-size: 40px;}
+    .titulo-2-texto {margin-bottom: 47px; width: 660px; max-width: 100%; height: 232px; line-height: 16px;}
+    }
+    .laptops-img-div {flex-wrap: wrap; margin-left: 0; margin-right: 0; gap: 14px;}
+    .laptops-background {height: 574px; margin-bottom: -541px;}
+    .laptop-img {width: 177px; height: 178px; margin-bottom: 0px;}
+    .flex-break {flex-basis: 100%; height: 0;}
+    .laptop-img3 {width: 368px; height: 372px; margin-top: -5px; margin-bottom: 80px;} 
+
+    .cards-1 {flex-wrap: wrap;}
+    .card-1-1, .card-1-2, .card-1-3 {width: 350px; height: 287px; max-width: 100%;}
+    .cards-2 {flex-wrap: wrap;}
+
+    .footer-div {display: flex; flex-direction: column; height: 64px;}
+    .footer-imgs {margin-bottom: 16px;}
+    .footer-text {width: 261px; max-width: 100%; height: 23px; font-size: 10px; line-height: 12.1px; text-align: center;}
+
+
 @media screen and (min-width: 3840px) {
     header {
         padding-top: 56px;
-- 
2.34.1