Autor Zpráva
Jirka ze Slezska
Profil *
Zdravím, mám takový problém s responsive designem. Při šířce okna 375 px a míň se mi přestane web "zmenšovat". Mrkněte se na to sami ve FF nebo v IE. V Chrome se to chová OK.
http://octaviafan.com/wt1/index.html

Nebudu sem dávat celý css styly (protože jsou delší a nevím, která část to způsobuje), tak aspoň odkazy:
CSS styl
Media Queries


Tak to dělá ten obrázek v části <aside> ... proč se mi jednou normálně zmenšuje a potom zas ne?! Víte někdo, jak to opravit?
panther
Profil
Jirka ze Slezska:
firefox narozdíl od chromu neumí zmenšovat až do úplné nudle.
Jirka ze Slezska
Profil *
To tím není, on se mi ten obrázek zmenšuje, dokud je ten aside v pravým sloupci stránky, jakmile to ale dám dolů, tak se obrázek přestane zmenšovat :-(
panther
Profil
Jirka ze Slezska:
ale je to tím. Přestane se zmenšovat nejen obrázek, ale i všechno kolem. Firefox pod tuto šířku s obsahem nehýbe a začíná zobrazovat horizontální scrollbar - udělá si tím dostatek místa a obrázek dál už není třeba zmenšovat (nadřazený prvek má dostačující šířku, proto ten scrollbar).
Jirka ze Slezska
Profil *
Tak proč, když ten obrázek oddělám, tak se to zmenšuje dál normálně?
panther
Profil
Skutečně? Obrázek jsem vyhodil, tady je moje okno FF - text jde do strany, protože se od jisté míry nezmenšuje.
http://2i.cz/acc01c36e5

Pokud chceš testovat v takto malých rozlišeních, testuj buď v Chromu, nebo si vezmi k ruce mobil. V Chromu/FF styly lišit nebudou.
Jirka ze Slezska
Profil *
Jasně, to už je ale extrémně malé rozlišení, co mi nezmenší ani chrome, jenže já bych to chtěl optimalizovat na 320x480 (viz Firefox -> vývoj webu -> responzivní design) a tady to pro toto nejmenší rozlišení zobrazuje bez obrázku korektně.
margin
Profil *
Co nechápu, a zatím jsem nenašel příčinu je, že když dám šířku (max-width) obrázku v px, třeba 20px, tak sloupec můžu zužovat pod 375px, ale když nechám šířku v procentech, tak se ani při 0% nedostanu pod 375px.
Jirka ze Slezska
Profil *
Koukni na to teďka, když já totiž #aside nastavím 100% width při nějaky tipuju media query pro 490, tak mi to nefunguje a šířka se bere z jakoby něčeho jinyho, co nechci, možná to bude ten problém? F5 a podívej, jak se to ted roztahuje dole ten aside
panther
Profil
Jirka ze Slezska:
když já totiž #aside nastavím 100% width při nějaky tipuju media query pro 490, tak mi to nefunguje a šířka se bere z jakoby něčeho jinyho
ne, šířka se počítá správně těch 100%. Docela mě zaráží, že při pokusu o responsivní design opomíjíš takové základní vlastnosti CSS jako že šířka = šířka + padding :-)
Jirka ze Slezska
Profil *
To já vím, jen je to pokus o 1. responsive design ;)
panther
Profil
Jirka ze Slezska:
To já vím, jen je to pokus o 1. responsive design ;)
to s tím přeci vůbec nesouvisí, nýbrž se základy CSS :-) O responsivnost tu nejde, nevešlo by se ti to tam ani „normálně“.

100% + 1em + 1em = přetečení boxu o šířce 100%.
Jirka ze Slezska
Profil *
Jo, mě to už došlo, co je tam za problém :-) Jen teď dumám nad tím, jak to elegantně vyřešit, abych zachoval ten padding: 1em a přitom aby mi to nepřetíkalo. Můžu dát třeba šírku 95% dejme tomu, ale pak se to stejně projeví na jinak velké mezeře někde ...


Ale i tak se mi pořád ten obrázek nezmenšuje, jak psal margin, když tomu obrázku dám max-width v px, tak to jde ale v % ne ...
margin
Profil *
panther:
100% + 1em + 1em = přetečení boxu o šířce 100%.
Nemusí, když se použije okrajový box-model.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: