Úvodní stránka › Fórum podpory WordPressu › Šablony, CSS (zobrazení webu) › Respozibilita stránek na mobil
Zvolené téma neobsahuje zatím 1žádnou odpověď. Do diskuze (2 účastníci) se naposledy zapojil uživatel Vlada a poslední změna je stará 7 let, 1 měsíc.
-
AutorPříspěvky
-
1. března 2017 (8:41) #31507
Přeji hezký den!
Mám otázku ohledně responzibility na mobil. Mám vytvořenou stránku zde:
http://kolobezka.friml.cz/2017/02/01/mec/Používám TinyMCE Advanced tři sloupce (prostřední sloupec je na oddělení, aby popis nebyl těsně nalepený na obrázku) – viz. příloha “administrace_prispevku.jpg”.
Při zobrazení na počítači není problém.
Problém je při zobrazení na mobilu na ležato, kdy se text neúměrně zvětší a obrázky jsou příliš malé – viz. příloha “mobil_nalezato.jpg”.
Ještě větší problém je při zobrazení na mobilu na stojato – viz. příloha “mobil_nastojato.jpg”. Chápu, že na výšku se to na mobil nevejde. Přesto bych to chtěl nějak ošetřit, buď něco co nedovolí zobrazit stránku na výšku a nebo něco co zmenší celou tabulku tak, aby se to na mobil vešlo i na výšku (i když to bude hodně malé a uživatel bude muset zoomovat).
Předem děkuji za radu.
Vláďa
Attachments:
1. března 2017 (8:42) #31508http://kolobezka.friml.cz/2017/02/01/mec/
Attachments:
1. března 2017 (12:52) #31521Dobrý den,
minule jsem Vám radil ať zrušíte zadané rozměry u buněk.
Nyní máte zadané rozměry u řádků. Zkuste opravdu nejdříve všechny tyto rozměry (i výšky) smazat a nechat to na šabloně. Nemůžeme chtít po tabulce které zadáte šířku 900px aby se nám vlezla do telefonu s rozlišením 600px. Dále máte zadáno písmo 12pt. I toto nechte na šabloně, potom bude písmo pro menší zařízení moc velké. Nejlépe je použít čistou tabulku bez stylů. Až budete mít toto upraveno uvidíme co s tím provede šablona a provedeme pouze drobné korekce v CSS.
Ukázka čistého kódu tabulky, když si přepnete na HTML
<table> <tbody> <tr> <td>Obsah buňky 1 v 1 řádku</td> <td>Obsah buňky 2 v 1 řádku</td> </tr> <tr> <td>Obsah buňky 1 ve 2 řádku</td> <td>Obsah buňky 2 ve 2 řádku</td> </tr> </tbody> </table>
1. března 2017 (14:46) #31525Dobrý den,
tak jsem se vynasnažil všechny rozměry smazat a velikost písma také. Nechal jsem jen styl písma a barvu. Už je to znatelně lepší. Nevíte jak jednoduše v příspěvku nastavit vše na “autosize”. Stačí s něčím drobně pohnout a musím jako otrok pořád měnit velikosti ve vlastnostech tabulky, buňky a i řádku. Prostě nějak mu přikázat, že to chci mít volně pořád?Výsledek z mobilu příspěvku http://kolobezka.friml.cz/2017/02/01/mec/ je v “OK_jen_velke_pismo.PNG” Zarovnání je ok, jen velikost písma je pořád moc veliká.
Co ale zůstavá špaténka je zobrazení (na vysoko v mobilu) příspěvku http://kolobezka.friml.cz/2017/02/18/magneticka-kulickova-draha/ kde na obrázku “SPATNE_zobrazeni.PNG” je vidět že má problémy se zobrazením rezervačního formuláře.
Attachments:
2. března 2017 (8:41) #31537Rozdělil bych to na dvě části.
1) Formátová tabulky se dá zrušit jednoduše, ale přijdete o všechno formátování. Pokud by šlo, jak píšete, pouze o styl a barvu možná je lépe opravdu v tabulce zrušit všechno formátování a tyto dvě věci vložit přímo do CSS.
Formátování smažete tak, že po vytvoření tabulky kliknete na rámeček tabulky tak, aby byla označena celá tabulka a po té kliknete na Formátování – Zrušit formátování2) Pro zobrazení rezervačního formuláře již není tabulka vhodná, protože formulář a slider obsahují spoustu dalších formátování (stylů) a jsou to vlastně pouze 2 věci vedle sebe.
Toto by chtělo uzavřít do bloku. Zkuste zrušit tabulku, označit pouze text a slider kliknout na Formátování – Formáty – Blokové prvky – Oddíl (div). Když potom přepnete na HTML uvidíte, že se text a slider uzavřely do<div> Váš text a slider </div>
Rezervační formulář nechte normálně za vytvořeným oddílem. Přiřaďte oddílu název stylů, které se mají použít například
<div class="kulicky"> Váš text a slider </div>
Tím si můžeme danému oddílu zadávat vlastní styl. Jděte tedy v administraci do Vzhled – Přizpůsobit – CSS a zde zkuste vložit
.kulicky {width: 80%;} @media screen and (max-width: 620px){ .kulicky {width: 100%;} }
Pokud šířka 80% bude malá, nebo příliš velká upravte si ji dle svého tak aby se formulář vlezl vedle vytvořeného oddílu. Další řádky kódu by měly zařídit, že v zařízeních s rozlišením menším než 620px by měl text a slider zabrat celou šířku a rezervační formulář by se měl šupnout pod ně.
2. března 2017 (11:46) #31545Děkuji za reakci – opět jsem se zase trošku posunul.
1) Šlo mi spíše o to, abych nemusel v nastavení tabulky pořád mazat ty rozměry tabulky. Je to totiž na třech místech – vlastnostech tabulky, vlastnostech buňky a vlastnostech řádku. Navíc se to pokaždé obnoví, když udělám sebemenší změnu v příspěvku. Šlo by to nějak ošetřit?
2) http://kolobezka.friml.cz/2017/02/18/magneticka-kulickova-draha/ Provedl jsem dle vaší rady a jediné co mi nejde ho přinutit, aby rezervační formulář dal napravo vedle oddílu. A to jsem oddíl zmenšil až na 30%.
3) U příspěvku http://kolobezka.friml.cz/2017/02/01/mec/ bych chtěl optimalizovat vzhled. Jako příklad jsem si vzal jiné stránky. Stávající je zde “Stavajici.PNG”. Jako výsledek po optimalizaci mám zde “Výsledek.PNG”. Pro mě jako začátečníka z wordpressem je tam hodně neznámých tzn. jak se zbavit okrajů šablony, změnšit řádkování, zmenšit písmo a případné zarovnávání pod obrázkem (ale to by ani nemuselo umět). Mohl byste mě alespoň trochu navést jak se do toho pustit?
Děkuji
Attachments:
2. března 2017 (12:54) #31553Díval jsem se, že máte do oddílu “kulicky” vloženy zvlášť nadpis, zvlášť text a zvlášť slider.
Zkuste to tedy jinak. Nainstalujte si plugin Page Builder by SiteOrigin. Při vytváření stránek a příspěvků Vám přibude nová záložka Page Builder. Zkuste jestli tento způsob vytváření stránek nebude lepší. Jen je vše v angličtině.2. března 2017 (14:40) #31554Hmm, tak to je velice komplexní a silný nástroj. To mě bude chvilku trvat než to všechno prošmejdím. Děkuji za tip.
3. března 2017 (10:15) #31559Přeji vám hezký den,
tak jsem si vytvořil testovací příspěvek zde: http://kolobezka.friml.cz/2017/03/02/test/ a je to přesně to co jsem potřeboval, dokonce mi to zarovnává text i pod obrázkem jak jsem chtěl. Na mobilu také super.
Teď se pídím po vychytávce zvětšování obrázku po jeho nakliknutí, podobně jak je to na stránkách zde: http://www.woodgears.ca/pantorouter/pantograph.html Když se klikne na obrázek, tak se zvětší a když se na něj klikne znovu, tak se zase zmenší na původní velikost. Máte nějaký tip jak na to?
Vláďa
4. března 2017 (7:10) #31564Tak já bohužel pro toto zvětšování neznám žádný plugin. Využívám jen nejvíce rozšířený způsob zvětšování obrázků a to Lightbox.
Pro toto zvětšení je pluginů více. Asi nejvíce využívaný právě plugin Lightbox.
7. března 2017 (12:33) #31597Hezký den,
ok, tak to zvětšování nechám zatím tak jak to je, není to zas tak důležitý.
Pokročil jsem ve vytváření stránky a mám následující otázky ohledně zobrazování příspěvků v šabloně. Zde http://kolobezka.friml.cz/category/pujcovna/ je co mi aktuálně zobrazuje šablona. Chtěl bych nějak docílit, aby se mi zobrazovali 4 sloupce náhledů s textem (aktuálně mohu jen 2). Zároveň bych chtěl odstranit popisky viz. obrázek v příloze.
Předem díky za nasměrování.
VláďaAttachments:
-
AutorPříspěvky
Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.