Diskuze: Jak udělat grid responzivní

HTML a CSS HTML a CSS Jak udělat grid responzivní American English version English version

Aktivity (1)
Avatar
Vojta Korduliak:7. června 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. června 13:25
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:7. června 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. června 14:32
Avatar
Odpovídá na Peter Mlich
Vojta Korduliak:7. června 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. června 15:13
Avatar
Jurajs
Člen
Avatar
Odpovídá na Vojta Korduliak
Jurajs:7. června 15:48

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

 
Nahoru Odpovědět 7. června 15:48
Avatar
Odpovídá na Jurajs
Vojta Korduliak:7. června 15:49

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

 
Nahoru Odpovědět  +1 7. června 15:49
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na Vojta Korduliak
Petr Čech:7. června 16:14

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

Nahoru Odpovědět 7. června 16:14
the cake is a lie
Avatar
Vojta Korduliak:7. června 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. června 17:22
Avatar
Nahoru Odpovědět  +1 7. června 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. června 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. června 20:48
Avatar
Odpovídá na Vojta Korduliak
Jiří Gavenda:7. června 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. června 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. června 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. června 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.