No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
19H
28M
56S
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Responsive design en la card

18/29
Recursos

Aportes 25

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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/

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">

鈥渕d: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">
          &starf;&starf;&starf;&starf;&starf;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">&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>