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,
Iniciar sesiónAportes 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?
o inicia sesión.