responsividade de telas menores ok

Gustavo-erades · Aug 17, 2023 · 1183aca · 1183aca
1 parent 47f7134
commit 1183aca
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/css/style.css b/css/style.css
@@ -60,7 +60,7 @@ section#home p{
         font-size:1.5em;
     }
     section#salgada h1{
-        font-size:3.3em
+        font-size:3em
     }
     section#especial h1{
         font-size:3.3em;
@@ -83,6 +83,16 @@ section#home p{
     section#QuemSomos-titulo{
         font-size: 2em;
     }
+    #promocao-do-dia-sm{
+        font-size: 1em;
+    }
+    ul#promocao-lista-sm{
+        display: none;
+    }
+    span.preco-promocao{
+        font-size:x-large;
+        display: block;
+    }
 }
 @media(max-width:300px){
     body{
@@ -115,6 +125,10 @@ section#home p{
     #promocoes{
         font-size: 2.4em;
      }
+    .preco-promocao{
+        font-size:x-large;
+        display: inline;
+    }
 }
 @media (min-width:301.98px){
     body{
@@ -149,6 +163,12 @@ section#home p{
         padding-top: 15px;
         padding-bottom:15px
      }
+    #promocao-lista-sm-menor{
+        display: none;
+    }
+    ul#promocao-lista-sm{
+        display: block;
+    }
 }
 @media (min-width:400px){
     section#home h1{
@@ -177,6 +197,32 @@ section#home p{
     section#doce h1{
         font-size: 5.2em;
     }
+    #promocao-lista-sm li{
+        font-size: 1em;
+    }
+    #promocao-do-dia-sm{
+        font-size: 1em;
+    }
+    #promocao-lista-sm{
+        margin-bottom: 0px;
+    }
+    p#promocao-lista-sm{
+        margin-bottom: 8px;
+    }
+    .preco-promocao{
+        font-size:x-large;
+    }
+}
+@media (min-width:420px){
+    #promocao-lista-sm li{
+        font-size: 1em;
+    }
+    #promocao-do-dia-sm{
+        font-size: 1em;
+    }
+    .preco-promocao{
+        font-size:xx-large;
+    }
 }
 @media (min-width:500px){
     header .navbar-brand span{
@@ -238,6 +284,15 @@ section#home p{
     section#quemSomos p.lead{
         font-size: 1.3em;
     }
+    #promocao-lista li{
+        font-size: 1.5em;
+    }
+    #promocao-do-dia{
+        font-size: 1.5em;
+    }
+    .preco-promocao{
+        font-size:xx-large;
+    }
 }
 @media(min-width:800px){
     section#home h4, section#home h2.lead{

diff --git a/index.html b/index.html
@@ -105,7 +105,7 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">Promoção rea
                                     <div class="col-md-4 mb-3">
                                         <div style="text-align: center;" class="card">
                                             <div class="card-body">
-                                                <ul id="promocao-lista">
+                                                <ul id="promocao-lista-sm">
                                                     <li class="card-text">
                                                         1 pizza <strong>tradicional</strong> grande 
                                                     </li>
@@ -116,14 +116,19 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">Promoção rea
                                                         <strong>+</strong> 1 refrigerante de 1,5 litros
                                                     </li>
                                                 </ul>
-                                                <p class="card-text" id="promocao-do-dia">por apenas <span class="preco-promocao">R$ 44,99</span></p>
-                                                <p id="promocao-do-dia" class="lead card-text mb-1">
+                                                <p id="promocao-lista-sm-menor">
+                                                    1 pizza <strong>tradicional</strong> grande 
+                                                    <strong>+</strong> 1 pizza brotinho de chocolate
+                                                    <strong>+</strong> 1 refrigerante de 1,5 litros
+                                                </p>
+                                                <p class="card-text" id="promocao-lista-sm">por apenas <span class="preco-promocao">R$ 44,99</span></p>
+                                                <p id="promocao-do-dia-sm" class="lead card-text mb-1">
                                                     <a class="btn botao-promocao" href="#salgada">
                                                         sabores tradicionais
                                                     </a>
                                                 </p>
                                             </div>  
-                                        </div>
+                                        </div>     
                                     </div>
                                 </div>
                             </div>
@@ -135,11 +140,11 @@ <h2 class="display-3 text-warning ml-auto mr-auto" id="promocoes">King Pizza do
                                     <div class="col-md-4 mb-3">
                                         <div style="text-align: center;" class="card">
                                             <div class="card-body">
-                                                <p id="promocao-do-dia" class=" lead card-text">
+                                                <p id="promocao-do-dia-sm" class=" lead card-text">
                                                     Todo dia uma King Pizza diferente, saborosa e com preço especial feita para você!
                                                 </p>
-                                                <p id="promocao-do-dia" class="lead card-text"> por apenas <span class="preco-promocao">R$ 29,99</span></p> 
-                                                <p id="promocao-do-dia" class="lead card-text mb-1">
+                                                <p id="promocao-do-dia-sm" class="lead card-text">por apenas<span class="preco-promocao">R$ 29,99</span></p> 
+                                                <p id="promocao-do-dia-sm" class="lead card-text mb-1">
                                                     <a class="btn botao-promocao" href="https://wa.me/5561994448515/?text=ol%C3%A1,%20gostaria%20de%20saber%20os%20sabores%20da%20king%20pizza%20do%20dia%20" target="_blank">
                                                         Confira os sabores
                                                     </a>