Skip to main content
se añadieron 19 caracteres en el cuerpo
Origen Enlace
user128299
user128299
  • Engloba a tus 3 div dentro de un contenedor principal

  • Hacer lo anterior, generará queEn este punto los 3 div quedenquedan 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;
         }
    }
    
  • Engloba a tus 3 div dentro de un contenedor principal

  • Hacer lo anterior, generará que los 3 div queden 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

    @media screen and (min-width: 401px) {
        .columnas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
         }
    }
    
  • 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;
         }
    }
    
Origen Enlace
user128299
user128299

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

  • Hacer lo anterior, generará que los 3 div queden 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

    @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