Autor Zpráva
miropiro
Profil
Dobrý den, už skoro půl dne se lopotím s designem tohoto webu fermentor.net/bootstrap-version/index.php - problém je v místě, kde pod tou sekcí dvakrát tří textů mám dvakrát dva bloky s textem a obrázky. Nějakou dobu jsem si s tím hrál, ale ukázalo se, že dá hodně zabrat, když chci ukočírovat tři samostatné prvky a mít je všechny responsivní...

Tak jsem zkusil vytvořit tabulku pod tím. Ta už mi přijde jako lepší řešení, ale potřebuji zoptimalizovat chování písma, aby se dle velikosti obrazovky zmenšilo a vlastně i ten obrázek k tomu bych potřeboval přizpůsobit...jenže i když jsem nastavil do souboru style.css následující kód

.paratablehead{
font-size:15px;
}
.paratable{
font-size:14px;
}

a dále
@media only screen and (max-width: 400px) { .paratablehead{
font-size:14px;
}
.paratable{
font-size:13px;
}
tak mi to kód nebere a nemění se to...kde mám chybu? A pro obrázek to taky půjde nějak vyřešit?

V tuto chvíli to testuji u buňky, ve které je text Filamentous fungus, submerged pellets, mycelium, hyphae, spores...

Předem díky za rady, už jsem z toho zoufalý :-(
Taps
Profil
miropiro:
nebude lepší použít procenta - Velikost písma podle šířky ?
Tomáš123
Profil
miropiro:
Responzívne deklarácie sa dávajú na koniec súboru, inak budú prehlušené. To sa deje aj v tvojom prípade. Používaj prieskumník stránok.

A pro obrázek to taky půjde nějak vyřešit?
Čo? Responzivita? Nastav mu float, clearuj za ním a zbavíš sa toho škaredého poskakovania. (Tiež zbytočne nastavuješ obrovský line-height.) Veľkosť obrázku môžeš meniť ľubovoľne.
miropiro
Profil
Responzívne deklarácie sa dávajú na koniec súboru, inak budú prehlušené.
To je dobré vědět. Tohle jsem netušil, že existuje takové pravidlo. A platí, že musí být tyto deklarace uspořádané dle velikosti rozlišení nebo je to jedno? Je totiž možné, že jak to mám jinak namíchané, tak proto mi ty experimenty výše (nad tabulkou) nešly moc dobře...
Tomáš123
Profil
miropiro:
Ak nebude mať príslušná deklarácia stanovené rozmedzie, hodilo by sa ich aj usporadúvať. Pre lepšie pochopenie, v nasledujúcom príklade bude mať prvok display: inline:
@media and (max-width: 400px) {
  prvok {display: block}
}
@media and (max-width: 600px) {
  prvok {display: inline}
}

Naopak tu, je poradie deklarácii nepodstatné:
@media and (max-width: 400px) and (min-width: 200px) {
  prvok {display: block}
}
@media and (max-width: 600px) and (min-width: 401px) {
  prvok {display: inline}
}
miropiro
Profil
Tomáš123: Díky, tohle je velmi dobrá připomínka! Mimochodem, zvědavě se zeptám, k čemu je vlastně deklarace "only screen"?
Tomáš123
Profil
miropiro:
k čemu je vlastně deklarace "only screen"?
Aj mňa to pred časom „zaujímalo“.
miropiro
Profil
Tak díky za rady, už se mi to přestalo tak pitomě kotit :) Ale teď mám otázku - pokud bych chtěl, aby od určitého rozlišení obrazovky to už nebyla tabulka dvakrát dva, ale čtyřikrát jedna, jak toho dosáhnout :D ?
Tomáš123
Profil
miropiro:
Záleží od HTML kódu. Ak je riadok daný značkou <tr> a bunka značkou <td> nevhodné zanorenie ti zamedzuje preskladávať štruktúru. Ak tabuľku simuluješ tabuľkovými vlastnosťami displayu, šlo by s tým niečo spraviť.

Konkrétne tvoj prípad (ak som sa pozrel na správnu časť kódu) tabuľku vôbec nevyžaduje. Stačí:
iny_prvok { /*Prvok namiesto <td>*/
  float: left;
  width: 50%;
  /*box-sizing: border-box; /*Vhodným prvkom nastavený padding a riadok nie je potrebný */
}
Samozrejme, potom tiež odstrániť <tr> a <table>.
miropiro
Profil
Tomáš123: No na tom něco pravdy bude, to bych mohl zkusit, ale třeba pamatovat na to, že to mám vlastně tři elementy, které je třeba nadefinovat a už jsem s nimi strávil pondělní dopoledne :-D Opravdu by to mohlo stačit ;-) ?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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