Changes in form style and form elements order

FredMagas · Aug 8, 2024 · 4ff78ca · 4ff78ca
1 parent 537cbb8
commit 4ff78ca
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/fredmagaweb/templates/index.html b/fredmagaweb/templates/index.html
@@ -208,9 +208,8 @@ <h2 data-aos="fade-right" data-aos-delay="100">
                         </div>
 
                         <div class="form-group">
-                            <textarea name="mensagem" rows="8" class="form-control" placeholder="Mensagem" maxlength="350" required autocomplete="off"></textarea>
+                            <textarea name="mensagem" rows="7" class="form-control" placeholder="Mensagem" maxlength="350" required autocomplete="off"></textarea>
                         </div>
-                        <div class="cf-turnstile" data-sitekey="0x4AAAAAAAg2jZV2tzH-uheS"></div>
                         <div class="form-group messages" data-aos="flip-right">
                             <button class="btn-enviar-contato">Enviar</button>
                             {% if messages %}
@@ -221,6 +220,7 @@ <h2 data-aos="fade-right" data-aos-delay="100">
                             </ul>
                             {% endif %}
                         </div>
+                        <div class="cf-turnstile form-group" data-sitekey="0x4AAAAAAAg2jZV2tzH-uheS"></div>
                     </form>
                 </div>
             </div>

diff --git a/static/css/index.css b/static/css/index.css
@@ -390,7 +390,7 @@ form {
 }
 
 .form-group {
-    margin: 2vh;
+    margin: 1.5vh;
 }
 
 input, textarea {
@@ -405,7 +405,7 @@ textarea {
 }
 
 select {
-    width: 51.5vw;
+    width: 51.8vw;
     border: none;
     border-radius: 1vh;
     padding: 1.5vh;
@@ -598,4 +598,26 @@ footer {
     .form-group {
         margin: 1vh;
     }
+
+    select {
+        width: 52.8vw;
+    }
+}
+
+@media screen and (max-width: 976px) {
+    select {
+        width: 52.8vw;
+    }
+}
+
+@media screen and (max-width: 820px) {
+    select {
+        width: 53.8vw;
+    }
 }
+
+@media screen and (max-width: 512px) {
+    select {
+        width: 54.8vw;
+    }
+}