NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:7.6.2018 13:25

Ukázka

Chci docílit: Pokouším se o to, aby se jednotlivé divy začali řadit pod sebe, při menším rozlišení, pomocí media query.

 
Odpovědět
7.6.2018 13:25
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:7.6.2018 14:32

Vetsinou, kdyz chces resit rozliseni, tak potrebujes porovnavat velikost sirky/vysky s hodnotou. Podle toho rozdelis css na 2 casti. Jedna, kde to roztahne pres cele, druhou, kde to usporada vedle sebe.

google = css grid multiple rows
-> https://gridbyexample.com/examples/

google = css media responsivity grid

@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}

Jestli spravne chapu, ten kousek kodu, tak by mel menit barvu cehosi podle
screen and (min-width: 1024px)

 
Nahoru Odpovědět
7.6.2018 14:32
Avatar
Vojta Korduliak
Člen
Avatar
Odpovídá na Peter Mlich
Vojta Korduliak:7.6.2018 15:13

To ne. Potřebuji aby se to začalo řadit pod sebe. Tzn. větší rozlišení - menší rozlišení

 
Nahoru Odpovědět
7.6.2018 15:13
Avatar
Jurajs
Člen
Avatar
Odpovídá na Vojta Korduliak
Jurajs:7.6.2018 15:48

Nauč se Bootstrap, je to jednodušší :D :D tam uděláš responzivní grid hned :)

 
Nahoru Odpovědět
7.6.2018 15:48
Avatar
Vojta Korduliak
Člen
Avatar
Odpovídá na Jurajs
Vojta Korduliak:7.6.2018 15:49

Bootstrap umím :P Chci se naučit i jiné možnosti :D

 
Nahoru Odpovědět
7.6.2018 15:49
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Vojta Korduliak
Petr Čech:7.6.2018 16:14

Tak se podívej na implementaci v Bootstrapu, ne?

Nahoru Odpovědět
7.6.2018 16:14
the cake is a lie
Avatar

Člen
Avatar
:7.6.2018 16:21

https://www.w3schools.com/…rwd_grid.asp

 
Nahoru Odpovědět
7.6.2018 16:21
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:7.6.2018 17:22

Nepotřebuji do toho zatahovat bootstrap. Potřebuji pochopit proč mi ty media queries nefungují, když na tomhle videu to funguje.

 
Nahoru Odpovědět
7.6.2018 17:22
Avatar
Aaa Aaa
Člen
Avatar
Odpovídá na Vojta Korduliak
Aaa Aaa:7.6.2018 20:42

Chtěl jsi něco takové? https://jsfiddle.net/2rLdougw/1/

 
Nahoru Odpovědět
7.6.2018 20:42
Avatar
Vojta Korduliak
Člen
Avatar
Odpovídá na Aaa Aaa
Vojta Korduliak:7.6.2018 20:48

Yeah.. přesně toto. Akorát jsem teď zjistil, že mi problémy v tom dělá ten obrázek. Když ho odstraním, tak to jede bez problémů, jenže já ho tam musím mít :D tzn problém přetrvává.

 
Nahoru Odpovědět
7.6.2018 20:48
Avatar
Aaa Aaa
Člen
Avatar
Odpovídá na Vojta Korduliak
Aaa Aaa:7.6.2018 20:57

Zkusil jsem v tom svém kódu do divů přidat obrázky a funguje mi to bez problému. Takže jedině můžeš zkusit poslat kód a rozměry obrázků.

 
Nahoru Odpovědět
7.6.2018 20:57
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:8.6.2018 10:23

Takže jsem zjistil, že tam stačilo nastavit jen rozměry v media querie :D proto mi ty ostatní divy vždy mizely.

Každopádně děkuji všem za pomoc.

 
Nahoru Odpovědět
8.6.2018 10:23
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 12 zpráv z 12.