Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Responsive design en la card

18/29
Recursos

Aportes 23

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Le coloque un detalle respecto a los bordes de la imagen cuando esta en md.
Lo hice con: md:rounded-r-sm

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/

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.

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!

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">
          &starf;&starf;&starf;&starf;&starf;Calificación
        </div>
      </div>
    </div>
    <!-- <script src="https://kit.fontawesome.com/055f901897.js"crossorigin="anonymous"></script> -->
  </body>
</html>

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">&starf;&starf;&starf;&starf;&starf; 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">&starf; &starf; &starf; &starf; &star; | 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">&starf; &starf; &starf; &starf; &star; | 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">&starf; &starf; &starf; &starf; &star; | 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">&starf; &starf; &starf; &starf; &star; | 12 reviews</p>
                </div>
            </div>
        </div>
</body>