2

Tengo una sección en la cual uso un grid, el problema es que en computadoras se ve bien, pero en móviles, quiero que aparezca el texto arriba y los inputs abajo (no importa si el botón no aparece abajo)

Este es el código que tengo

body, html {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    overflow-x: hidden;
}

.grid {
  display:grid;
  grid-template-columns: auto auto;
}

@media screen and (max-width:980px) {
  .grid {
    display:block;
  }
}
<form>
   <div class="container" data-b="f6">
      <div class="fade--1">
         <div class="grid">
            <div class="sec fade">
               <div class="form-group complete">
                  <span class="fsize"><i class="fas fa-user-circle fsize"></i></span>
                  <input class="form-field complete" id="uname" type="text" placeholder="Enter your name" required>
               </div>
               <div class="form-group complete">
                  <span class="fsize"><i class="fas fa-envelope fsize"></i></span>
                  <input class="form-field complete" id="uemail" type="email" placeholder="Enter your email" required>
               </div>
               <div class="form-group complete">
                  <span class="fsize"><i class="fas fa-comment-dots fsize"></i></span>
                  <textarea class="form-field complete subtitle" data-resize="no" id="umsg" placeholder="Type here" required></textarea>
               </div>
            </div>
            <div class="sec t-center">
               <h2 class="title">Lorem ipsum</h2>
               <p class="subtitle">Lorem ipsum....</p>
               <p><br></p>
               <p><input value="Send" type="submit" href="register/" class="btn-linear--2 complete"></p>
            </div>
         </div>
      </div>
   </div>
</form>

A simple vista, pareciera una solución invertir la posición de los bloques, pero no es una opción, pues tengo un bloque anterior al formulario, usando grid también, el cual va con una imagen a la derecha y texto a la izquierda, entonces si invertimos las posiciones de los bloques se va a ver "raro"

PD: Se puede usar JS si es necesario, no hay limitaciones en cuanto a eso

2
  • ¿Los 2 textos que dicen Lorem Ipsum?
    – user128299
    Commented el 12 feb. 2021 a las 4:12
  • @BetaM Correcto, la idea es mover el div con la clase sec t-center arriba y el otro div abajo cuando se esté en dispositivos móviles
    – Rodrigo
    Commented el 12 feb. 2021 a las 4:17

1 respuesta 1

1

Podrías usar grid-row:

Especifica el tamaño y la ubicación de un elemento de la cuadrícula dentro de la fila de la cuadrícula contribuyendo una línea, un tramo o nada (automático) a su ubicación de la cuadrícula, especificando así el borde de inicio y final en línea de su cuadrícula zona.

Ejemplo:

body,
html {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  overflow-x: hidden;
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
}

@media screen and (max-width:980px) {
  .grid>.sec:nth-child(1) {
    grid-row: 2;
  }
  .grid>.sec:nth-child(2) {
    grid-row: 1;
  }
}
<form>
  <div class="container" data-b="f6">
    <div class="fade--1">
      <div class="grid">
        <div class="sec fade">
          <div class="form-group complete">
            <span class="fsize"><i class="fas fa-user-circle fsize"></i></span>
            <input class="form-field complete" id="uname" type="text" placeholder="Enter your name" required>
          </div>
          <div class="form-group complete">
            <span class="fsize"><i class="fas fa-envelope fsize"></i></span>
            <input class="form-field complete" id="uemail" type="email" placeholder="Enter your email" required>
          </div>
          <div class="form-group complete">
            <span class="fsize"><i class="fas fa-comment-dots fsize"></i></span>
            <textarea class="form-field complete subtitle" data-resize="no" id="umsg" placeholder="Type here" required></textarea>
          </div>
        </div>
        <div class="sec t-center">
          <h2 class="title">Lorem ipsum</h2>
          <p class="subtitle">Lorem ipsum....</p>
          <p><br></p>
          <p><input value="Send" type="submit" href="register/" class="btn-linear--2 complete"></p>
        </div>
      </div>
    </div>
  </div>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.