2

Estoy intentando hacer que 3 columnas sean responsivas, logré que cada columna tenga un ancho del 33.33% de cada pantalla, sin embargo, esto en el celular no se ve nada bien, por ende, quiero que cuando se vea desde un celular las columnas queden alineadas verticalmente.

Probé el siguiente código (solo para probar puse que cuando alcance 400px la letra se ponga de color rojo)

Estilos

<style> 
@media screen and (max-width: 400px) {
    .column {
      color:red;
      float: left;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      text-align: left; 
    }
}


.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  text-align: left; 

}

</style> 

HTML

<div class="column" style="background-color:#aaa;">
    <p style="line-height: 1.5; font-size: 14px;">
        <strong>
            <span style="color: #029c95;">
                Dirección
            </span>
        </strong><br>
        Cra 5 # 71-45. Local 201<br>
        Edificio La Strada<br>
        Barrio Rosales
    </p>
  </div>
  
  
  
  <div class="column" style="background-color:#bbb;">
    <p style="line-height: 1.5; font-size: 14px;">
        <strong>
            <span style="color: #029c95;">
                Celular
            </span>
        </strong><br>
        (031) 649 1116<br>
        (300) 256 9458<br>
    </p>

    <p style="line-height: 1.5; font-size: 14px;">
        <strong>
            <span style="color: #029c95;">
                Correo
            </span>
        </strong><br>
        [email protected]
    </p>  
  </div>
  
  
  
  <div class="column" style="background-color:#ccc;">
    <p style="line-height: 1.5; font-size: 14px;">
        <strong>
            <span style="color: #029c95;">
                Horario
            </span>
        </strong><br>
        Lunes a Viernes<br>
        Sábados<br>
        Domingos y Festivos
    </p>

  </div>

Cuando la pantalla tenga un tamaño superior a 400px me gustaría que se vea así: introducir la descripción de la imagen aquí

Cuando la pantalla tenga un tamaño inferior a 400 me gustaría que se vea así: introducir la descripción de la imagen aquí

1 respuesta 1

2

Tu código tiene muchos detalles, te los iré comentando:

Para solucionar el problema inicial puedes plantearlo de esta forma:

  • Engloba a tus 3 div dentro de un contenedor principal

  • En este punto los 3 div quedan uno sobre el otro por ser elementos en bloque, con eso obtienes de forma inicial el resultado que esperas

  • Ahora si quieres que cuando sean mas de 400px los div pasen de elementos uno encima del otro a elementos uno a lado del otro, puedes establecer esta media query y trabajarlo por medio de CSS Grid

    @media screen and (min-width: 401px) {
        .columnas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
         }
    }
    

Por otro lado, si observas:

  • Todos los textos dentro de los div ocupan un renglón único, dado eso en lugar de usar un span y tener que darle un salto de línea con un br, mejor usa una etiqueta p y así obtendrás el mismo resultado

Finalmente yo dejaría solo a nivel de CSS el grueso o peso de la letra para no depender directamente de una etiqueta HTML como lo es strong (salvo que tengas de forma explícita algún requerimiento que la solicite)

Entonces propongo:

<style>
  * {
    font-size: 14px;
  }
  .columnas-column {
    background-color:#aaa;
    margin: 10px;
    padding: 10px;
  }
  .columnas-column_titulo-principal { 
    color: #029c95;
    font-weight: bold;
    line-height: 1.5;
  }
  @media screen and (min-width: 401px) {
    .columnas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
  }
  
</style>
<div class="columnas">
  <div class="columnas-column">
      <p class="columnas-column_titulo-principal">
        Dirección
      </p>
      <p class="columnas-column_texto">
        Cra 5 # 71-45. Local 201
      </p>
      <p class="columnas-column_texto">
        Edificio La Strada
      </p>
      <p class="columnas-column_texto">
        Barrio Rosales
      </p>
  </div>
  
  
  
  <div class="columnas-column">
      <p  class="columnas-column_titulo-principal">
        Celular
      </p> 
      <p class="columnas-column_texto">
        (031) 649 1116
      </p>
      <p class="columnas-column_texto">
        (300) 256 9458
      </p>
      <p class="columnas-column_titulo-principal">
      Correo
      </p>
      <p class="columnas-column_texto">
        [email protected]
      </p>  
  </div>
  
  
  
  <div class="columnas-column">
      <p class="columnas-column_titulo-principal">
        Horario
      </p>
      <p class="columnas-column_texto">
        Lunes a Viernes
      </p>
      <p class="columnas-column_texto">
        Sábados
      </p>
      <p class="columnas-column_texto">
        Domingos y Festivos
      </p>
  </div>
</div>

Enlaces de interés y referencias

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.