Le coloque un detalle respecto a los bordes de la imagen cuando esta en md.
Lo hice con: md:rounded-r-sm
Introducción, instalación y ambiente de desarrollo
¿Qué es Tailwind CSS?
Instalación y ambiente de desarrollo
Directivas de Tailwind
Conceptos básicos
Personalización y configuración
Responsive Design, Mobile First y Utility First
Utilerías
Colores
Cómo crear grids o columnas en Tailwind CSS
Dimensiones y Espacios
Cambiando las propiedades de la tipografía
Ajustando el espaciado entre letras y líneas
Display
Flexbox
Crea tus propias utilerías
Entendiendo las variantes y las pseudo-clases
¡Es hora de practicar!
Proyecto: PlatziFood
Creando una card
Aplicando formato a la card
Responsive design en la card
Construye el header
Crea el footer
Crea un banner
Cómo integrar una card
Forms
Directivas de Apply
Extraer componentes
Navbar
Alpine JS
Optimiza tu archivo: PurgeCSS y NanoCSS
Conclusiones
Conclusiones y qué sigue
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Responsive design en la card
18/29Recursos
¿Cómo crear tarjetas responsivas para múltiples dispositivos?
La creación de tarjetas responsivas es esencial para garantizar que un diseño luzca espectacular en cualquier dispositivo, desde teléfonos móviles hasta tabletas. Para ello, necesitas estar familiarizado con ciertos conceptos esenciales del diseño web, como el uso de clases CSS y el empleo de flexbox, especialmente al trabajar en entornos de desarrollo.
¿Qué significa ser "responsivo"?
Ser responsivo implica que tu diseño web se adapte automáticamente al tamaño de la pantalla en la que se presenta. Esto es crucial para una buena experiencia del usuario, asegurando que el contenido sea siempre accesible y estéticamente agradable sin importar el dispositivo. Por ejemplo, una tarjeta de producto puede mostrarse de manera diferente en un iPhone X en comparación con un iPad.
¿Cómo ajustar el ancho de las imágenes?
El primer paso es asegurarse de que las imágenes se ajusten correctamente al ancho de la tarjeta. Esto se logra con clases CSS como w-full para ocupar el ancho completo disponible. Sin embargo, si deseas mostrar múltiples productos en una sola vista, necesitas ajustar el ancho. Utilizar w-1/2 puede dividir el contenido para presentar dos tarjetas lado a lado, especialmente útil en pantallas más grandes.
.imagen {
width: 100%;
}
.tarjeta {
width: 50%;
}
¿Cómo orientar las tarjetas usando Flexbox?
Flexbox es una herramienta poderosa para manipular la disposición de elementos dentro de un contenedor. Al aplicar flex a un contenedor, puedes modificar la orientación de las tarjetas. Por defecto, los elementos se alinean horizontalmente, lo cual es ideal para mostrar el texto a la derecha de la imagen, creando un diseño más cohesivo.
.contenedor {
display: flex;
flex-direction: row; /* Para orientación horizontal */
}
¿Cómo mejorar el diseño con estilos condicionales?
A medida que se prueba y ajusta el diseño, el uso de media queries permite aplicar estilos condicionales según el tamaño de la pantalla. Al establecer una pseudo-clase específica para dispositivos de tamaño mediano, puedes controlar cómo deben arreglarse y visualizarse los elementos dentro de la tarjeta. Esto asegura que el diseño sea flexible y se ajuste de manera óptima.
@media (min-width: 768px) {
.tarjeta {
width: auto;
flex-direction: row;
}
}
Además, es posible que desees ajustar ciertos estilos visuales, como la eliminación de fondos innecesarios o la aplicación de bordes redondeados para crear un efecto más estilizado. Todo es cuestión de experimentar hasta encontrar la configuración que mejor se adapte a tus necesidades.
¿Por qué es crucial la prueba y error en el desarrollo?
El proceso de hacer responsivo un diseño a menudo se basa en prueba y error. Al ajustar pequeñas características y observar los resultados, puedes identificar cuál es la mejor solución para los diversos escenarios que presentan los tamaños de dispositivos. No te desanimes si algo no funciona la primera vez; la flexibilidad y la disposición a ajustar y refinar son claves en el desarrollo web.
Implementando estas técnicas, puedes crear tarjetas responsivas efectivas que mejoren significativamente la experiencia del usuario en cualquier dispositivo. Continuar aprendiendo y explorando nuevas tecnologías siempre te abrirá la puerta a mejores prácticas y resultados más impresionantes en tus proyectos de diseño web.
Aportes 25
Preguntas 1
Ordenar por:
Para los que quieran probar de forma más sencilla la parte responsive existe una extensión en chrome (y derivados) y firefox para darte una vista de como se ve en cada dispositivo es muy útil, se llama Responsive Viewer.
Chrome: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
Firefox: https://addons.mozilla.org/es/firefox/addon/responsiveviewer/
Hola mi aporte para esta clase es en la vista de iPad, si la vista en horizontal, el texto se ve de esta forma, con mucho espacio blanco abajo:
Eso se soluciona agregando, la propiedad de flex al div que contiene todo el texto:
<div class="relative mx-2 p-2 shadow-lg md:shadow-none bg-white md:bg-transparent rounded-lg -mt-2 md:flex flex-col justify-center">
“md:flex flex-col justify-center” ==> md para indicarle que solo en dispositivos medianos queremos activar la propiedad flex, por defecto flex viene en formato row, así que con flex-col indicamos que todo el contenido se muestre en forma de columna, así mantenemos que todo vaya en forma vertical y no horizontal y por último con justify-center, logramos centrar verticalmente el contenido en base al tamaño del contenedor.
El resultado final se mira así:
Saludos!
En mi caso, solo deje los bordes a los costados de la tarjeta y agrega la sombra a toda la tarjeta y se la quite del contenedor del texto… me gusta el resultado.
Algo que me percate al revisar los diferentes diseños, es que al pasar la vista para iPhone a horizontal, la foto queda pegada a la izquierda en vez extenderse por la pantalla, para solucionar esto, lo único que hice fue quitar la propiedad responsiva de w-full dentro de la imagen para que se aplicará a todos los formatos y me funciono bien. Esto con motivo para que se vea bien o al menos alineado en todos los dispositivos.
Para quien pueda ayudarle con los errores al escribir o seguir la clase:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>macrameStore</title>
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body class="min-h-screen bg-gray-500 mx-4 mb-8">
<div class="mt-4 md:w-1/2 md:flex md:bg-white rounded-lg">
<div>
<img class="rounded-lg" src="img/macrame_1.jpg" alt="colgante_1" />
</div>
<div
class="md:w-full relative mx-2 p-2 rounded-lg shadow-lg bg-white md:bg-transparent -mt-2"
>
<h2 class="text-xl tracking-tight font-bold uppercase text-gray-900 md:text-lg">
Titulo
</h2>
<p class="text-gray-700 leading-snug">Colgante con piedra de amatista</p>
<div class="mt-2 text-sm text-gray-700">85 €</div>
<div class="mt-2 text-sm text-yellow-700">
★★★★★Calificación
</div>
</div>
</div>
<!-- <script src="https://kit.fontawesome.com/055f901897.js"crossorigin="anonymous"></script> -->
</body>
</html>
Código que llevamos actualmente en clase:
<body class="min-h-screen bg-blue-100 mx-4 mb-8">
<div class="mt-4 md:w-1/2 md:flex md:bg-white rounded-lg">
<div>
<img class="w-full md:rounded-r-sm" src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80" alt="">
</div>
<div class="relative mx-2 p-2 shadow-lg bg-white md:bg-transparent rounded-lg -mt-2">
<h2 class="text-xl tracking-tight font-semibold uppercase text-blue-300 md:text-lg">Paleta No-Gluten</h2>
<p class="text-pink-300 leading-snug font-normal font-mono">Lorem ipsum dolor sit amet consec.</p>
<div class="mt-2 text-sm font-semibold text-gray-700">MX $25</div>
<div class="mt-2 text-xs text-yellow-700">⭐⭐⭐⭐/ 36 reseñas</div>
</div>
</div>
</body>
Aqui la card en ambos tamaños:
1.Ipad
2.Celular
Mi Card para iPad
El diseño esta feo pero lo fácil que es hacerlo con tailwind y poder crear nuestros propios componentes.
Lo que me pareció importante fue agregarle el object-cover, que sería la propiedad object-fit: cover, más que nada para que no se nos deforme la imagen a la hora de trabajar.
Con object-cover:
Sin object-cover:
buenas, una consulta, puedo tener a parte un archivo css propio no?? para realizar algunos estilos particulares.
Si el card es muy grande, seria mejor utilizarle al DIV de la imagen la clase m-auto para centrarla ya sea vertical y horizontalmente.
Veo que en Tailwind CSS se requiere un poco más de trabajo en comparación a otros Frameworks, en Bootstrap por ejemplo esto del responsive es mucho más fácil.
Modifiqué un poco los estilos para que se lograra ver mejor, comparto mis cambios:
<div class="md:w-1/2 mt-4 rounded-lg md:flex md:bg-white md:shadow-lg md:items-center">
<div>
<img class="rounded-lg" src="https://images.unsplash.com/photo-1565060299509-453c4f3bc905?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80" alt="">
</div>
<div class="relative mx-2 p-2 shadow-lg bg-white rounded-lg -mt-2 md:bg-transparent md:shadow-none">
<h2 class="text-xl tracking-tight font-semibold uppercase text-gray-900 md:text-lg">hamburguesa con queso</h2>
<div class="text-gray-700 leading-snug">Hamburguesa con queso y aderezo de chipotle</div>
<div class="mt-2 text-sm font-semibold text-gray-700">MXN $15.00</div>
<div class="mt-2 text-xs text-yellow-700">★★★★★ 36 reseñas</div>
</div>
Practica responsive
hola chicos, una ayudita, leyendo comentarios en el responsive de md quite el w-full pero mi card queda asi, no se que mas pueda ser, sigo el paso el paso. Gracias
Una herramienta que podemos utilizar para ver los breakpoints por tamaño de pantalla es Responsively
Esta herramienta es open source y puede utilizarse de forma gratuita
Tuve que cambiar la imagen pero todo bien.
Para responsive recomiendo la herramienta Responsively. Estaba usando Responsive Viewer pero cada vez que hacía un cambio en la App tenía que volverlo a abrir.
Hice también una pequeña refactorización en el código implementando display grid que no hemos visto en este curso, también haciendo mas responsive las imagenes que pueden ser mas largas o mas grandes:![](
Codigo:
<body class='min-h-screen bg-gray-500'>
<div class="mt-4 mx-4 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-2 lg:gap-3 2xl:grid-cols-4">
<div class="md:flex md:bg-white rounded-lg mb-4 md:mb-0">
<figure>
<img class="rounded-lg w-full h-56 md:h-full object-cover md:rounded-r-sm" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=500&q=80"/>
</figure>
<div class="bg-white md:bg-transparent rounded-lg -mt-8 md:-mt-0 relative shadow-lg md:shadow-none mx-3 p-2 2xl:flex 2xl:flex-col 2xl:justify-center">
<p class="uppercase font-bold tracking-tight ">CHEESE HAMBURGUER</p>
<p class="my-2 text-gray-700 leading-tight">Cheese Hamburguer with meat, tomatoes and a lot of delicious cheese.</p>
<p class="my-2 text-gray-700 leading-tight uppercase font-semibold text-sm"> $3.99 usd</p>
<p class="text-xs text-yellow-600">★ ★ ★ ★ ☆ | 12 reviews</p>
</div>
</div>
<div class="md:flex md:bg-white rounded-lg mb-4 md:mb-0">
<figure>
<img class="rounded-lg w-full h-56 md:h-full object-cover md:rounded-r-sm" src="https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=500"/>
</figure>
<div class="bg-white md:bg-transparent rounded-lg -mt-8 md:-mt-0 relative shadow-lg md:shadow-none mx-3 p-2 2xl:flex 2xl:flex-col 2xl:justify-center">
<p class="uppercase font-bold tracking-tight ">CHEESE HAMBURGUER</p>
<p class="my-2 text-gray-700 leading-tight">Cheese Hamburguer with meat, tomatoes and a lot of delicious cheese.</p>
<p class="my-2 text-gray-700 leading-tight uppercase font-semibold text-sm"> $3.99 usd</p>
<p class="text-xs text-yellow-600">★ ★ ★ ★ ☆ | 12 reviews</p>
</div>
</div>
<div class="md:flex md:bg-white rounded-lg mb-4 md:mb-0">
<figure>
<img class="rounded-lg w-full h-56 md:h-full object-cover md:rounded-r-sm" src="https://images.unsplash.com/photo-1567234669003-dce7a7a88821?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"/>
</figure>
<div class="bg-white md:bg-transparent rounded-lg -mt-8 md:-mt-0 relative shadow-lg md:shadow-none mx-3 p-2 2xl:flex 2xl:flex-col 2xl:justify-center">
<p class="uppercase font-bold tracking-tight ">CHEESE HAMBURGUER</p>
<p class="my-2 text-gray-700 leading-tight">Cheese Hamburguer with meat, tomatoes and a lot of delicious cheese.</p>
<p class="my-2 text-gray-700 leading-tight uppercase font-semibold text-sm"> $3.99 usd</p>
<p class="text-xs text-yellow-600">★ ★ ★ ★ ☆ | 12 reviews</p>
</div>
</div>
<div class="md:flex md:bg-white rounded-lg mb-4 md:mb-0">
<figure>
<img class="rounded-lg w-full h-56 md:h-full object-cover md:rounded-r-sm" src="https://images.unsplash.com/photo-1510693206972-df098062cb71?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"/>
</figure>
<div class="bg-white md:bg-transparent rounded-lg -mt-8 md:-mt-0 relative shadow-lg md:shadow-none mx-3 p-2 2xl:flex 2xl:flex-col 2xl:justify-center">
<p class="uppercase font-bold tracking-tight ">CHEESE HAMBURGUER</p>
<p class="my-2 text-gray-700 leading-tight">Cheese Hamburguer with meat, tomatoes and a lot of delicious cheese.</p>
<p class="my-2 text-gray-700 leading-tight uppercase font-semibold text-sm"> $3.99 usd</p>
<p class="text-xs text-yellow-600">★ ★ ★ ★ ☆ | 12 reviews</p>
</div>
</div>
</div>
</body>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?