No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Básico de Tailwind 2 y 3

Curso Básico de Tailwind 2 y 3

Ana María Díaz Solorio

Ana María Díaz Solorio

Haciendo responsivo nuestro proyecto

23/29
Recursos

Aportes 17

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

h-96 es la altura máxima que nos deja usar tailwind, pero también podemos indicar la altura que queramos, como h-[36rem]

En determinado elemento se añade el prefijo lg: correspondiente a un min-width: 1024px seguido de la clase que tendrá para ese tamaño. Se puede añadir tantos breakpoints como se desee a cualquier elemento.


Por ejemplo en la sección home:

        <div id="home">
            <div class="w-full h-3/4">
                <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:pt-20 lg:justify-start">
                    <input type="search" class="outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:w-11/12 lg:hidden" placeholder="San Francisco" name="" id="">
                    <div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
                        <p class="text-4xl ml-16 font-bold text-black">Encuentra más ubicaciones como esta</p>
                    </div>
                    <button class="w-48 rounded-full text-lg text-primary shadow-sm font-semibold p-4 bg-white transition transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110 lg:ml-16">Explorar</button>
                </div>
                <div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
                    <img class="lg:hidden" src="./img/sanFrancisco.jpg" alt="San Francisco City">
                </div>
            </div>
        </div>

Para reducir nuestro problemas en responsible trata siempre en lo posible de no romper el flujo normal del documento con position absolute si existen alternativas para conseguir lo mismo.

La verdad este curso ha sido totalmente una mala experiencia, llevando malas practicas, mal SEO, no se entiende el porque hace las cosas y los errores hacen notar que no hay nada de preparacion para estas actividades. Ademas por si lo notaron se hacen arreglos diferentes al figma todo porque no se empareja bien con lo que esta haciendo en el proyecto

Mi pregunta a todo esto, qué pasa si alguien viene con una tablet o da vuelta el celular?
Más que responsive design veo que estamos trabajando para dos pantallas predefinidas.
Alguno con más experiencia que puede comentar?
Gracias

Tanto costaba apretar alt z?

Hola a todos, acá les dejo el código del home haciendo que la sección del mensaje en la imagen del home y el botón se reposicionen en el centro aprovechando que el contenedor tiene la propiedad flex:

<div class="w-full h-3/4 lg:relative" id="home">
        <div class="w-full h-full flex flex-col absolute space-y-96 py-4 items-center lg:space-y-0 lg:items-start lg:justify-center lg:h-full lg:pl-16">
          <input class="text-primary outline-none p-3 rounded-full shadow-sm transition duration-300 focus-within:shadow-sm focus:ring-2 focus:ring-primary focus:w-11/12 lg:hidden" placeholder="San Francisco" type="search" name="" id="">
          <div class="hidden h-auto lg:w-2/5 lg:flex pb-6">
            <p class="text-4xl font-bold">Encuentra más ubicaciones como esta</p>
          </div>
          <button class="w-48 rounded-full bg-white text-lg text-primary shadow-sm font-semibold p-4 transition-all duration-500 ease-in-out hover:bg-primary hover:text-white transform hover:-translate-y-1 hover:scale-110">
            Explorar
          </button>
        </div>
        <div class="w-full h-full lg:h-96 lg:bg-sanFranciscoDesktop lg:bg-cover lg:bg-center">
          <img class="lg:hidden" src="../public/img/sanFrancisco.jpg" alt="">
        </div>
      </div>

Note que el texto de la parte del home no cambiaba de forma por mas que coloque font-bold , font-semibold o font-extrabold , esto se debe a que cuando copiamos la fuente Montserrat del Google Fonts no elegimos las opciones para esos tamaños de fuente.

aqui debajo dejo el link correspondiente a pegar para que se vea en negrita

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> 
si hago la parte de home de la siguiente manera. Habria alguna diferencia en cuanto rendimiento o seria mala practica? : \
                    \                    \                \
```js
```
la maestra no sabe enseñar, denle cursos de oratoria antes de ponerla a hacer cursos...
la solucion a los textos que no se ven sobre los fondos de imagenes podria ser darle shadow al texto de color blanco
En lo personal, decidí dejar el texto en color blanco y posicionarlo en la tonalidad mas oscura a la izquierda de la imagen. Me pareció mas estético para mantener la armonía con el color del botón 🤓 ![](https://static.platzi.com/media/user_upload/Screenshot%202024-06-05%20at%2010.36.33%E2%80%AFPM-6f4677f7-a26f-4726-a410-fb6a7f8bbf16.jpg)
Esta propiedad les puede ayudar a que texto sea más visible. Se le agrega una sombra al texto. `drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,.8)]`
<https://play.tailwindcss.com/FsYvh7AoN3?size=780x1355>
bg-sanFrancisco lg:bg-sanFranciscoDesktop
Y este, en caso de que usen color negro de fuente.```js drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,.8)] ```

Don’t use sm: to target mobile devices

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class=“sm:text-center”></div>
Use unprefixed utilities to target mobile, and override them at larger breakpoints

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class=“text-center sm:text-left”></div>

https://tailwindcss.com/docs/responsive-design#overview