🎨 Melhorando responsividade

Co-authored-by: João Marcos Moraes de Andrade <[email protected]>
fga-eps-mds · Jan 31, 2025 · ff831a7 · ff831a7
1 parent 8fbf4c2
commit ff831a7
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/src/app/pages/feedback-page/feedback-page.css b/src/app/pages/feedback-page/feedback-page.css
@@ -5,22 +5,27 @@ body {
     align-items: center;
     height: 100vh;
     background-color: #f8f9fa;
+    margin: 0;
+    overflow: hidden; /* Remove qualquer rolagem */
 }
 
-.container {
-    text-align: center;
-    background: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    width: 500px;
-    margin-left: 650px;
-    margin-top: 30px;
+.containner {
+
+        width: 90%;
+        max-width: 500px;
+        background: #fff;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        margin-bottom: 450px;
+
+
 }
 
+
 h2 {
     color: #007bff;
-    font-size: 14px;
+    font-size: 18px;
     margin-bottom: 10px;
 }
 
@@ -48,8 +53,48 @@ textarea.input-field {
     cursor: pointer;
     font-size: 14px;
     margin-top: 30px;
+    display: block; /* Garante que ele obedeça margens automáticas */
+    margin-left: auto;
+    margin-right: auto; /* Centraliza horizontalmente */
+
 }
 
+
 .submit-button:hover {
     background-color: #0056b3;
 }
+
+:host {
+    position: fixed;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100%;
+    height: 100vh;  /* Mantém o componente fixo na tela inteira */
+    overflow: hidden; 
+}
+
+
+
+@media (max-width: 600px) {
+    .container {
+        width: 95%;
+        padding: 15px;
+    }
+
+    h2 {
+        font-size: 16px;
+    }
+
+    .input-field {
+        font-size: 12px;
+        padding: 8px;
+    }
+
+    .submit-button {
+        width: 100%;
+        font-size: 12px;
+        padding: 8px;
+    }
+}
diff --git a/src/app/pages/feedback-page/feedback-page.html b/src/app/pages/feedback-page/feedback-page.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="containner">
         <h2>Selecione o tipo do feedback abaixo</h2>
         <form action="#" method="post">
             <select name="tema" class="input-field" required>