Media query: mi nem jó ebben a kódban?
Sziasztok!
Az a feladat, hogy 900px alatt legyen a fejléc borderje zöld.
A fejlec id-ja: #fejlec
Köszi a segítségeket!
@media screen and (max-width: 899px) and (min-width: 320px) {
#fejlec {
border: 1px solid green;
}
}





A min-width-et miért adod meg (ha nem muszáj)?
A hibát nyilván nem ez okozza, hanem például az, hogy később definiálod a css-ben a #fejlec border-jét, ami felülírja az előtte megadott deklarációt.
Én !important -ot szoktam használni a media query-kben, nem biztos, hogy a legjobb megoldás, de működik.
Köszönöm, hogy írtál!
A min-width is meg volt adva a feladatban, csak rövidre fogtam a kérdést.
A style-ban először az ID-k és a classok vannak megadva, és a végén a media query.
Próbáltam az !important-ot, de megmakacsolta magát a dolog.





@media (max-width: 899px) {
#fejlec {
border: 1px solid green;
}
}
Köszi, de nem vált zöldre így sem.
Itt akkor már valsz nem is a kóddal van gond.
De akkor mivel...
kipróbáltam ezt:
@media screen and (max-width: 899px) and (min-width: 720px) {
#fejlec {color: blue}
}
@media screen and (max-width: 719px) and (min-width: 320px) {
#fejlec {color: green}
}
így 719 alatt zöldre vált, de 900-720 között nem lesz kék, pedig tök ugyanaz a kód.





Nem értem mi a gondod...





így látod a méreteket is...





Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!