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.

Aktivity

jakubho

Člen

jakubho:21.6.2017 21:15

Ahoj. Mám webovou stránku, kde mám text umístěný v divu s id "obsah":

#obsah{
        width:80%;
        margin: 0px auto;
}

Čeho chci dosáhnout pomocí media query je toto:

@media(max-width:700px){
        #obsah{
                width:50%;
                margin-right:30%;
        }
}

Takhle, pokud to chápu dobře, bych měl nastavit, že div obsah se zmenší na 50% mateřského elementu a přidá se mu ten margin, pokud bude obrazovka menší než 700px. Vztekám se s tím už docela dlouho, prošel jsem spoustu stránek ale nemůžu najít odpověď, proč to nefunguje. Přesněji, uplatní se pouze styl, který je uvedený v @query a ten původní se úplně ignoruje, tj. styl z té query se načte i když je obrazovka mnohem větší než oněch 700px.

Co dělám špatně? Mockrát díky

Odpovědět

21.6.2017 21:15

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:21.6.2017 21:22

@media only screen and  (max-width: 700px) {
tady divy
}

Nahoru Odpovědět

21.6.2017 21:22

Když vím, tak poradím. Nikdo neví všechno :-)

gorri

Člen

gorri:21.6.2017 21:31

Každopádně je to odzkoušené. Teď jsem to pro jistotu ještě zkusil abych pak nebyl za hlupáka :-D
Toto ti bude fungovat. :-)

Nahoru Odpovědět

21.6.2017 21:31

Když vím, tak poradím. Nikdo neví všechno :-)

jakubho

Člen

jakubho:21.6.2017 21:46

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?

Nahoru Odpovědět

21.6.2017 21:46

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:21.6.2017 21:51

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.
:-)

Nahoru Odpovědět

21.6.2017 21:51

Když vím, tak poradím. Nikdo neví všechno :-)

jakubho

Člen

jakubho:21.6.2017 21:59

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;
}

Nahoru Odpovědět

21.6.2017 21:59

Chyba-Jediná jistota v životě programátora.

jakubho

Člen

jakubho:21.6.2017 22:00

Pardon, zapomněl jsem dát odpovědět, je to tu

Nahoru Odpovědět

21.6.2017 22:00

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:21.6.2017 22:08

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

Nahoru Odpovědět

21.6.2017 22:08

Když vím, tak poradím. Nikdo neví všechno :-)

gorri

Člen

gorri:21.6.2017 22:09

Opět jsem to odzkoušel a jede to

Nahoru Odpovědět

21.6.2017 22:09

Když vím, tak poradím. Nikdo neví všechno :-)

gorri

Člen

gorri:21.6.2017 22:11

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;
}
}

Nahoru Odpovědět

21.6.2017 22:11

Když vím, tak poradím. Nikdo neví všechno :-)

gorri

Člen

gorri:21.6.2017 22:13

Ten important tam být nemusí. je tam k ničemu. Jen jsem to zkusil :-D
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;
}
}

Nahoru Odpovědět

21.6.2017 22:13

Když vím, tak poradím. Nikdo neví všechno :-)

jakubho

Člen

jakubho:21.6.2017 22:20

Jo, to ukončení jsem akorát špatně skopíroval sem na fórum, jsem ten řádek omylem neskopíroval, to mám dobře
S těmi barvami to teď nějak funguje, jen je to nepřesné (místo 700px se to aktivuje asi na 630px, ale to není moc velký problém). Divný je však chování v tom smyslu, že všechno jede perfektně, pokud stránce měním velikost tak, že si otevřu vývojářské nástroje a roztáhnu je, aby se stránka zmenšila. Ale když to budu dělat normálním a ne prasáckým způsobem, teda otevřu si na chromu v nástrojích tu simulaci zobrazení tak se nic nestane. Taky to tu mám otevřený na mobilu, kterej to má taky červené (Předpokládám, že mobil nemá víc jak 700px, ne? ). Možná jen nechápu jak pracují jednotky, ale teď jsem se v tom teda fakt ztratil.
Co je v to !important za auto v tvém kódu?

Nahoru Odpovědět

21.6.2017 22:20

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:21.6.2017 22:28

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

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

21.6.2017 22:28

Když vím, tak poradím. Nikdo neví všechno :-)

jakubho

Člen

jakubho:21.6.2017 22:38

Díky za tvoje rady, už jdu spát, ale mrknu se na to zítra tak pak napíšu. Zatím dobrou noc:)

Nahoru Odpovědět

21.6.2017 22:38

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:21.6.2017 22:42

Není zač. Kdyžtak piš. Rád pomůžu když budu vědět. :-)

Nahoru Odpovědět

21.6.2017 22:42

Když vím, tak poradím. Nikdo neví všechno :-)

jakubho

Člen

jakubho:22.6.2017 15:23

Tak jsem nastavil 980px a teď už všechno pracuje normálně. Děkuju za pomoc

Nahoru Odpovědět

22.6.2017 15:23

Chyba-Jediná jistota v životě programátora.

gorri

Člen

gorri:22.6.2017 15:39

Jsem rád, že ti to pomohlo. Kdyby něco tak klidně piš ;-)

Nahoru Odpovědět

22.6.2017 15:39

Když vím, tak poradím. Nikdo neví všechno :-)

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 17 zpráv z 17.