Diskuze: Nefungující media queries
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 17 zpráv z 17.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Každopádně je to odzkoušené. Teď jsem to pro jistotu ještě zkusil
abych pak nebyl za hlupáka
Toto ti bude fungovat.
Díky za snahu, jenomže mě to nefunguje, teď se ten styl ve query neukáže nikdy :/ Nemůže to třeba něco ovlivňovat?
Pošli něco dalšího. Toto nemá co ovlivnit. Vzal jsem to co jsi napsal,
upravil a otestoval. Funguje.
Možná tam jen nemáš něco ukončené.
Netuším. Viděl jsem jen to co jsi napsal.
HTML
<body>
<!-- kód... -->
<div id="web_container">
<h1 class="title">Nějaký nadpis</h1>
<p id="perex">...</p>
<p>...</p>
</div>
</body>
CSS
#web_container {
margin: 0px auto;
width: 80%;
}
@media only screen and (max-width: 700px) {
#web_container {
margin-right:30%;
width: 50%;
}
Ten h1 titulek je teda v relativní pozici, nevím, jestli to může mít vliv...
.title {
position: relative;
top: -75;
background-color: #adcbe3;
padding-left: 5px;
padding-right: 5px;
font-size: 2.5em;
margin-bottom: 0px;
font-family: 'Titillium Web', sans-serif;
}
V pohodě. Máš tam chybu.
@media only screen and (max-width: 700px) {
#web_container {
margin-right:30%;
width: 50%;
}
Chybí ti tam ještě jedno ukončení. Ukončuješ styl divu ale neukončuješ mediaquery
}
Nicméně to jede i bez toho. Vezmi si ten div, dej mu nějakou barvu do
pozadí a jinou barvu v mediaquery
klasický bez mediaquery
#web_container {
margin: 0px auto !important;
width: 50%;
background: grey;
}
a v mediaquery
@media only screen and (max-width: 700px) {
#web_container {
margin-right:30%;
width: 50%;
background: red;
}
}
Ten important tam být nemusí. je tam k ničemu. Jen jsem to zkusil
Takže ve finále běžné CSS
#web_container {
margin: 0px auto;
width: 10%;
background: grey;
}
a s mediaquery
@media only screen and (max-width: 700px) {
#web_container {
margin-right:30%;
width: 100%;
background: red;
}
}
Bohatě stačí dát mediaquerry
@media only screen and (max-width: 980px)
Já to používám a bez problémů.
faktem je, že se mi to z nějakého nepochopitelného důvodu taky nechce v
chrome ukázat.
Díval jsem se teď na telefon a pohoda. Akorát to chce max-width: 980 jak jsem
napsal.
Toto je pro mobily dostačující a zároveň se to zobrazuje i pro tablet
dobře.
Ten !important je vynucení. Ale to moc nepoužívej. Pak se v tom začneš
ztrácet možná
Díky za tvoje rady, už jdu spát, ale mrknu se na to zítra tak pak napíšu. Zatím dobrou noc:)
Tak jsem nastavil 980px a teď už všechno pracuje normálně. Děkuju za pomoc
Zobrazeno 17 zpráv z 17.