No aplica la medida al titulo | Arquitectura CSS: descomplicando los problemas | Alura Latam

1
respuesta

por Angela Viviana Rojas Ladino

| 102.3k xp | 2 posts

Hola, cuando paso el font-size a la parte de abajo, queda pequeño el titulo

.banner__titulo{
    color: #fdfdfd;  
    font-family: Pacifico, cursive;  

    position: absolute;
    left: 50%;
    text-shadow: 0 4px 4px rgba(0,0,0,0.75);
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 100%;
}

@media screen and(min-width:0){
    .banner__titulo{
        font-size: 3rem;
  }  
}

@media screen and(min-width:768px){
    .banner__titulo{
        font-size: 5.0625rem;
    }
}

se aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

por Luis Armando Silva Balladares

| 81.9k xp | 5 posts

08/03/2023

Hola Angela, debes dejar un espacio entre and y (min-width:768px) de esta forma el @media se leerá correctamente

.banner__titulo {
    color: #fdfdfd;
    font-family: Pacifico, cursive;

    position: absolute;
    left: 50%;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.75);
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 100%;
}

@media screen and (min-width:0) {
    .banner__titulo {
        font-size: 3rem;
    }
}

@media screen and (min-width:768px) {
    .banner__titulo {
        font-size: 5.0625rem;
    }
}