Responsive design en la card

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

José Alfonso Vargas Cruz

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/

fernandomunoz

Profe Platzi

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.

Marco Jaramillo Castro

Daniel Jonguitud

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.

Francisco Javier Antúnez Durán

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>

Rubén Ernesto Aragón Gil

hace 2 años

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>

Aranxa Martinez

hace 2 años

Aqui la card en ambos tamaños:
1.Ipad

2.Celular

Juan Gui Arenas

Mi Card para iPad

Maximiliano Alfredo Camacho Rios

127.0.0.1-Galaxy-S9-Plus-S8-Plus-412x846.png

Eduardo Reyes

El diseño esta feo pero lo fácil que es hacerlo con tailwind y poder crear nuestros propios componentes.

Ricardo Andrés Nakanishi

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:

Guy Sánchez

Captura de pantalla de 2021-05-29 15-47-42 (copia).png

Kevin Parra Lopez

(

deddyibanez

buenas, una consulta, puedo tener a parte un archivo css propio no?? para realizar algunos estilos particulares.

Michael Bolaños Vargas

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.

Gonzalo Pimentel

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.

Diego Alfonso Najera Ortiz

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>

Ivan Gonzalez Gonzalez

Terech

Practica responsive

Cindy Yuliana Castro Plazas

Captura de Pantalla 2021-03-18 a la(s) 11.50.35 a. m..png

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

Cesar Velásquez Córdova

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

Ruben Garcia

Tuve que cambiar la imagen pero todo bien.

Angel David Castiblanco Sepulveda