0

estoy teniendo problemas para poder hacer responsive una tarjeta de un producto con su descripción. La idea es que se adapte a móviles, tablets y computadoras y no se vea igual en los tres breakpoints. Al menos un componente debe estar maquetado con flex propio. Usé un poco de Bootstrap 5 pero la idea es usarlo lo menos posible. Logré que se vea bien en móviles y pc, pero en el breakpoint de tablet se rompe la imagen y el texto queda pegado a ella en lugar de pasarse abajo. EL código está envuelto en un main con la clase container y en un section con la clase row.

Paso las imágenes de cómo se están viendo en los tres breakpoints. Mi idea es que en mobile la imagen ocupe el 100% del ancho disponible y el texto también (salvo por un mínimo de margen). En tablet la imagen debería verse de la misma forma excepto por un poco de margen y padding con el texto abajo. Y en pc más o menos como ahora, pero un poco más prolija la distribución del texto al lado de la imagen.

Versión tablet actual

Versión mobile actual

Versión desktop actual

Dejo el link de la img: https://ae01.alicdn.com/kf/HTB16fi1PVXXXXb4aXXXq6xXFXXXI/Escape-de-grillete-de-cadena-Escape-de-pu-o-Color-plateado-color-dorado-primer-plano-magia.jpg_Q90.jpg_.webp Alguien sabe cómo puedo adaptarlo?

Para los breakpoitns usé los media queries en una etiqueta style:

<link rel="stylesheet" href="./css/mobile.css" />
<link rel="stylesheet" href="./css/tablet.css" media="(min-width: 576px)" />
<link rel="stylesheet" href="./css/desktop.css" media="(min-width: 993px)" />
Esposas de escapismo
            <div class="card card__producto__esposas">
                <img class="img-fluid" src="../img/productos/esposas.png" alt="Esposas de escapismo" />
            </div>

            <h3 class="esposas__titulo__descripcion">Descripción</h3>

            <div class="producto__caracteristicas">

                    <p class="card-text text-md-center">
                        Su acero inoxidable, las cadenas, los candados y las llaves que
                        atrapan tus
                        manos
                        son
                        suficiente para convencer a tu público de que son esposas 100%
                        reales, sin una
                        sola
                        parte de
                        plástico. ¡Esto hará todavía más increíble tu escapismo cuando en
                        tres segundos
                        liberes tus
                        manos de ellas de una manera imposible!
                    </p>
                </div>
            </div>

Código CCS de versión móvil:

.producto__main__container {
display: flex;
flex-wrap: wrap;
margin: 20px 0px;
align-content: flex-start;

}

.esposas__titulo__descripcion{
flex: 100%;
text-align: right;

}

.card__producto__esposas{
width: 40rem;
margin: 1rem 0;

}

.producto__caracteristicas{
flex: 1;
margin: 1.3rem;
padding: 1rem;

}

Código CSS para tablets:

.producto__main__container {
padding: 25px;

}

Código CSS para desktop:

.producto__main__container {
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;

}

.producto__main__container > div {
flex-direction: row;
flex-wrap: wrap;

}

.producto__main__container .producto__titulo {
flex: 100%;

}

.card__producto__esposas {
flex: 1 30%;
order: 1;

}

.producto__caracteristicas {
flex: 1;
order: 2;

}

Saludos y desde ya muchas gracias!

5
  • Para la versión tablet se usan una @media () y para la versión teléfonos se usa otra @mendia (). Cada uno de ellos separados y con sus propios atributos Commented el 28 nov. 2022 a las 11:44
  • Por favor, ¿podrías completar la pregunta con capturas de pantalla de la versión fallida de tablet, indicando la versión de bootstrap que estás utilizando y explicando cómo quieres distribuir los tres elementos (imagen, título y descripción) en cada uno de los tres formatos?
    – o1dskoo1
    Commented el 28 nov. 2022 a las 12:30
  • @o1dskoo1 hola! Recién subí las imágenes. Muchas gracias!
    – Mar
    Commented el 29 nov. 2022 a las 22:21
  • Te he propuesto una respuesta, creo que te puede valer.
    – o1dskoo1
    Commented el 30 nov. 2022 a las 12:14
  • @o1dskoo1 muchísimas gracias!!!
    – Mar
    Commented el 30 nov. 2022 a las 13:54

1 respuesta 1

0

Antes de nada: Falta una línea en el HTML, ya que hay un cierre </div> de más. Entiendo que es <div class="producto__main__container">, así que la añado a la respuesta. Además, tampoco figura el título "Esposas de escapismo", así que lo añadiré a mano también.

Ten en cuenta también que no es necesario crear un fichero CSS por cada versión, puedes usar las media queries directamente en un único archivo, como muestro en la solución que te ofrezco a continuación.

En cuanto al formato que quieres presentar, teniendo en cuenta que en móvil cada bloque (imagen, título y descripción) va a ir uno debajo de otro, no necesitas utilizar flexbox aún. Simplemente maquétalos y úsalo ya en la versión tablet, cuando requieras colocar varios elementos en una misma columna.

Te pongo un ejemplo de cómo quedaría el layout que quieres conseguir (he renombrado las clases y obviado algunos elementos estéticos), eliminando toda referencia a bootstrap. Te recomendaría también que ajustases los margin y padding de elementos como los h2, h3 o p para que la separación entre bloques quede más uniforme.

/* Estilo para test, no hace falta usarlo */
.outter {
  color: #fff;
  background: #000;
}

/* Mobile */

/* Añadir un margen al contenedor donde se incluye el producto */
.product__container {
  margin: 1rem;
  padding: 1rem;
  background: gray; /* Test */
}

/* Alinear el título 'Descripción' a la derecha */
.product__subtitle {
  text-align: right; 
}

/* Hacer que el contenedor de la imagen tenga un margen superior e inferior para separarlo del texto */
.product__image img {
  margin: 1rem 0;
}

/* Hacer que la imagen ocupe todo el ancho */
.product__image img {
  display: block;
  width: 100%; 
  height: auto;
}

/* Tablet */

@media (min-width: 576px) {
  /* Alinear el nombre del producto al centro */
  .product__title {
    text-align: center;
  }
  
  /* Utilizar flex para colocar la imagen y el texto de la descripción en la misma línea, centrados respecto al eje X */
  .product__description {
    display: flex;
    align-items: center;
  }

  /* Indicar que el contenedor de la imagen ocupa el 30% del ancho y que no se va a estirar, corregir el margen superior e inferior de la versión mobile incluyendo un margen a la derecha para separarlo del texto  */
  .product__image {
    flex: 0 0 30%;
    margin: 0 1rem 0 0;
  }
  
  /* Indicar que el texto ocupa el resto del espacio al ancho y que, dentro de dicho espacio, está alineado al centro */
  .product__text {
    flex: 1;
    text-align: center;
  }
}

@media (min-width: 993px) {
  /* Indicar que la imagen ocupa 40rem del ancho y que no se va a estirar */
  .product__image {
    flex: 0 0 30%;
  }
}
<div class="outter">
  <div class="product__container">
    <h2 class="product__title">Esposas de escapismo</h2>
    <h3 class="product__subtitle">Descripción</h3>
    <div class="product__description">
      <div class="product__image">
        <img src="https://picsum.photos/300/200" alt="Esposas de escapismo" />
      </div>
      <div class="product__text">
        <p>Su acero inoxidable, las cadenas, los candados y las llaves que atrapan tus manos son suficiente para convencer a tu público de que son esposas 100% reales, sin una sola parte de plástico. ¡Esto hará todavía más increíble tu escapismo cuando en tres segundos liberes tus manos de ellas de una manera imposible!</p>
      </div>
    </div>
  </div>
</div>

En cualquier caso, y si me permites, creo que hay un fallo en el diseño. Por un lado, lo más razonable sería que el título 'Descripción' estuviese alineado sobre el contenido al que acompaña (el texto de debajo). Tal y como tienes planteado el diseño, en la versión mobile queda raro, porque aparece la palabra 'Descripción' (además con una alineación a la derecha, distinta a la de cualquier contenido) pero debajo está la imagen, no el texto. Yo haría esto, colocando la etiqueta del título justo delante del texto y manteniendo la alineación de ambos a la izquierda para mejorar la legibilidad:

/* Estilo para test, no hace falta usarlo */
.outter {
  color: #fff;
  background: #000;
}

/* Mobile */

/* Añadir un margen al contenedor donde se incluye el producto */
.product__container {
  margin: 1rem;
  padding: 1rem;
  background: gray; /* Test */
}

/* Hacer que el contenedor de la imagen tenga un margen superior e inferior para separarlo del texto */
.product__image img {
  margin: 1rem 0;
}

/* Hacer que la imagen ocupe todo el ancho */
.product__image img {
  display: block;
  width: 100%; 
  height: auto;
}

/* Tablet */

@media (min-width: 576px) {
  /* Alinear el nombre del producto al centro */
  .product__title {
    text-align: center;
  }
  
  /* Utilizar flex para colocar la imagen y el texto de la descripción en la misma línea, centrados respecto al eje X */
  .product__description {
    display: flex;
    align-items: center;
  }

  /* Indicar que el contenedor de la imagen ocupa el 30% del ancho y que no se va a estirar, corregir el margen superior e inferior de la versión mobile incluyendo un margen a la derecha para separarlo del texto  */
  .product__image {
    flex: 0 0 30%;
    margin: 0 1rem 0 0;
  }
  
  /* Indicar que el texto ocupa el resto del espacio al ancho */
  .product__text {
    flex: 1;
  }
}

@media (min-width: 993px) {
  /* Indicar que la imagen ocupa 40rem del ancho y que no se va a estirar */
  .product__image {
    flex: 0 0 30%;
  }
}
<div class="outter">
  <div class="product__container">
    <h2 class="product__title">Esposas de escapismo</h2>
    <div class="product__description">
      <div class="product__image">
        <img src="https://picsum.photos/300/200" alt="Esposas de escapismo" />
      </div>
      <div class="product__text">
        <h3 class="product__subtitle">Descripción</h3>
        <p>Su acero inoxidable, las cadenas, los candados y las llaves que atrapan tus manos son suficiente para convencer a tu público de que son esposas 100% reales, sin una sola parte de plástico. ¡Esto hará todavía más increíble tu escapismo cuando en tres segundos liberes tus manos de ellas de una manera imposible!</p>
      </div>
    </div>
  </div>
</div>

También es algo que podrías resolver con grid en lugar de flexbox, puedes echarle un vistazo aquí: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout

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.