Par quelque raison, ma requête de média CSS ne fonctionne pas pour les largeurs d'appareil de 1001px et plus. Je n'ai jamais vu cela se produire avec aucun de mes projets précédents. Des suggestions ?
Mes requêtes média pour les appareils de 1000px et moins fonctionnent bien. J'ai mis à jour Chrome, vidé mon cache, et toujours rien. Voici mon CSS...
style {
@media only screen and (min-width: 1001px) and (max-width: 1500px) {
/* --- NAVIGATION ---*/
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 2rem 1.5rem;
background: white;
box-shadow: 0px 0px 33px -18px gray;
position: fixed;
z-index: 2;
width: 100%;
}
.nav-item {
margin-left: 2rem;
}
.nav-link {
font-size: 13pt;
font-weight: 400;
color: #8f8f8f;
}
/* --- CORPS ---*/
.header-div {
filter: brightness(100%);
height: 23rem;
}
#header-image {
max-width: 100%;
filter: brightness(80%);
margin-top: 2rem;
position: relative;
z-index: -1;
}
.header-h1 {
color: white;
font-size: 20pt;
font-weight: 400;
width: 20rem;
padding-left: 2rem;
margin-top: -16rem;
}
.header-h2 {
color: white;
font-weight: 300;
margin-top: 5px;
margin-bottom: 9px;
font-size: 15pt;
padding-left: 2rem;
}
.first-button {
color: black;
background: #f2f2f2;
border-radius: 3px;
padding: 4px 11px;
border: none;
font-weight: 400;
margin-top: 10px;
cursor: pointer;
transition: all linear 0.4s;
margin-left: 2rem;
}
.first-button:hover {
color: white;
background: black;
}
}
}
