Respozibilita stránek na mobil

[VladaParticipant]

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. 

   Administrace_prispevku.jpg
   

[VladaParticipant]

http://kolobezka.friml.cz/2017/02/01/mec/

Attachments:

1. 

   Mobil_nalezato.jpg
   

2. 

   Mobil_nastojato.jpg
   

[JKovacParticipant]

Dobrý 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>

[VladaParticipant]

Dobrý 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:

1. 

   SPATNE_zobrazeni.png
   

2. 

   OK_jen_velke_pismo.png
   

[JKovacParticipant]

Rozdě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ě.

[VladaParticipant]

Dě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:

1. 

   Stavajici.png
   

2. 

   Výsledek.png
   

[JKovacParticipant]

Dí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ě.

[VladaParticipant]

Hmm, 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.

[VladaParticipant]

Př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

[JKovacParticipant]

Tak 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.

[VladaParticipant]

Hezký 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áďa

Attachments:

1. 

   Odstraneni_textu.jpg
   

[Autor]

Příspěvky