Geek tričko zdarma Týden návrhu sw
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Využij až 80% slevu na kurzy Návrhu Software
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
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
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  +1 7.6.2018 15:49
Avatar
Petr Čech
Redaktor
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
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
Nahoru Odpovědět  +1 7.6.2018 20:42
"Kdybychom byli bez chyb, nezpůsobilo by nám takovou radost odhalovat chyby druhých. " - Francois de la Roc...
Avatar
Odpovídá na Jiří Gavenda
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
Odpovídá na Vojta Korduliak
Jiří Gavenda: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  +1 7.6.2018 20:57
"Kdybychom byli bez chyb, nezpůsobilo by nám takovou radost odhalovat chyby druhých. " - Francois de la Roc...
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  +1 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.