A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Haciendo responsivo nuestro proyecto

23/29
Recursos

Aportes 2

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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>

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