style: estilo sugestao arrumado

rrafaelc · Nov 17, 2023 · 50f88eb · 50f88eb
1 parent 9c79f5e
commit 50f88eb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/sugestoes/index.php b/sugestoes/index.php
@@ -48,7 +48,7 @@
       </div>
       <div class="duvida-sugestao">
         <label for="mensagem">Dúvida/Sugestão</label>
-        <textarea cols="50" rows="50" class="texto-sugestao" id="mensagem" name="mensagem" required placeholder="Digite sua dúvida ou sugestão"></textarea>
+        <textarea class="texto-sugestao" id="mensagem" name="mensagem" required placeholder="Digite sua dúvida ou sugestão"></textarea>
       </div>
       <button class="botao mostrar" type="submit">ENVIAR</button>
       <div class="spinner loader"></div>

diff --git a/sugestoes/style.css b/sugestoes/style.css
@@ -12,15 +12,16 @@
   font-size: 20px;
   margin: 50px auto;
   min-height: 80vh;
+  padding: 0 20px;
 }
+
 #suaduvida {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   color: var(--vermelho-escuro);
   margin: 3rem 0;
-  width: 70%;
   font-weight: 500;
   font-size: 3rem;
   text-align: center;
@@ -32,15 +33,19 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  max-width: 800px;
   gap: 20px;
 }
 
 .inputs > div {
-  width: 70%;
+  width: 100%;
+}
+
+.inputs input {
+  width: 100%;
 }
 
 .inputs input {
-  min-width: 100%;
   border-radius: 8px;
   padding: 10px;
   font-size: 2rem;
@@ -60,7 +65,8 @@
 
 .duvida-sugestao {
   margin-top: 10px;
-  width: 70%;
+  max-width: 800px;
+  width: 100%;
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -70,7 +76,7 @@
   height: 250px;
   font-weight: 500;
   resize: none;
-  min-width: 250px;
+  width: 100%;
   border: 2px solid black;
   border-radius: 10px;
   padding: 15px 10px;
@@ -79,7 +85,8 @@
 
 .botao {
   display: none;
-  width: 300px;
+  max-width: 300px;
+  width: 100%;
   margin: 20px 0;
   background-color: var(--azul-destaque);
   border: none;
@@ -108,28 +115,27 @@
 }
 
 @media (max-width: 1000px) {
-  #suaduvida {
-    width: 90%;
+  .box-sugestao {
+    width: 100%;
   }
-}
 
-@media (max-width: 650px) {
   .box-sugestao {
     border: none;
     margin-top: 1rem;
   }
+}
 
+@media (max-width: 650px) {
   #suaduvida {
     margin-top: 0;
     font-size: 2.5rem;
   }
 }
 
 @media (max-width: 500px) {
+  .inputs,
   .inputs > div,
-  .duvida-sugestao,
-  .aluno,
-  #sim-nao {
+  .inputs input {
     width: 100%;
   }
 }