Právě je 24 črc 2019 00:27

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]




Odeslat nové téma Odpovědět na téma  [ Příspěvků: 16 ]  Přejít na stránku 1, 2  Další
Autor Zpráva
 Předmět příspěvku: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 20 kvě 2016 10:22 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
Dobrý deň,

Prosim co upravit v css (pripadne niekde inde) aby sa v default sablone na mobilnom zobrazeni zobrazovali produkty + kategorie v dvoch stlpcoch a nie v jednom.

Dakujem pekne


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 23 kvě 2016 12:50 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7165
Dobrý den,

výchozí šablona aplikace PrestaShop default-bootstrap je vytvořena pomocí Bootstrap frameworku. Takže se podívejte do dokumentace jeho grid/mřízkového systému a v tpl šablonách si upravte zobrazení podle potřeby. Mřížka je rozdělena na 12 sloupců, takže pokud má některý prvek nastavenou např. třídu col-xs-12, tak to znamená, že při Extra Small (<768px) rozlišení se zobrazí pouze v jednom sloupci, resp. přes všech 12 sloupců mřížky. A když třídu změníte např. na col-xs-6, tak se zobrazí ve dvou sloupcích, resp. přes 6 sloupců mřížky a další prvek přes 6 zbývajících sloupců mřížky.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 24 kvě 2016 14:19 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
Super, ďakujem pekne za odpoveď, tu je návod:

Stačí v šablone themes/default-bootstrap/product-list.tpl zmeniť "col-xs-12" na "col-xs-6" a hotovo :).


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 24 kvě 2016 14:39 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
Tak postup síce funguje, ale nie úplne správne.

Vyskytuje sa tento problém, nie každý box s produktom sa zobrazuje na vedľa seba. Neviem čím to môže byť spôsobené. Prosím môžete sa nato pozrieť?

Zmeny sú na našej subdoméne dev.************.sk


Přílohy:
Untitled-2.png
Untitled-2.png [ 64.36 KiB | Zobrazeno 1062 krát ]
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 24 kvě 2016 14:54 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
Ešte jedna vec, do šírky 480px sa zobrazjú produkty správne, od 479px a nižšie sa objavuje tento problém. Ďakujem


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 25 kvě 2016 14:27 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7165
Dobrý den,

jelikož jste změnil zobrazení pro menší rozlišení na dva sloupce, tak si ještě budete muset upravit CSS styly šablony. Protože v nich je nadefinované různé chování obtékaní prvků dle rozlišení (resp. šířky) obrazovky.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 25 kvě 2016 14:52 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
To mi je samozrejme jasné, ale neprišiel som nato, čo to spôsobuje, resp. čo upraviť. Prosím viete ma nasmerovať?


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 25 kvě 2016 16:49 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7165
Dobrý den,

CSS styly související s výpisem produktů naleznete v souboru themes/default-bootstrap/css/product_list.css. Definice pro mřížkové zobrazení začíná od řádku:
Kód:
/*******************************************************
Product list(Grid) Styles
********************************************************/


Teoreticky by mělo stačit upravit všechna nastavení, která jsou určena pro rozlišení od 480px do 767px:
Kód:
@media (min-width: 480px) and (max-width: 767px) {
aby se použila i pro menší rozlišení než 480px. Takže úprava by vypadala:
Kód:
@media (max-width: 767px) {


A stejně tak nastavení pro rozlišení od 480px do 991px:
Kód:
@media (min-width: 480px) and (max-width: 991px)
případně upravit na:
Kód:
@media (max-width: 991px)


Ale je možné, že v CSS stylech ještě existují jiné provázanosti, takže po úpravě doporučuji vše důkladně otestovat.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 25 kvě 2016 17:27 
C4 zákazník
Uživatelský avatar

Registrován:
06 čer 2014 19:28
Příspěvky:
593
Ďakujem pán Plašil.

Vyzerá to, že by to malo byť vporiadku, avšak narazil som na jeden problém, ktorý nedokážem nasimulovať na Desktope.
Prejavuje sa to len na mobile, neviem či máte tú možnosť to skúsiť, ale pri mobile sa pri výpise produktov stránka rozšíri o pár pixelov (šedý pruh)
(Testované na Androide, v prehliadači Opera + Chrome rozlíšenie telefónu Full HD)

Len upozorním, že toto nežiadané "rozšírenie" sa zobrazovalo aj pred úpravou CSS ako ste napísali vyššie.

Ďakujem


Přílohy:
Screenshot_20160525-171042.png
Screenshot_20160525-171042.png [ 161.2 KiB | Zobrazeno 1028 krát ]
Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Mobilne zobrazenie - 2 stĺpce produktu
PříspěvekNapsal: 26 kvě 2016 10:28 
C4 podpora
C4 podpora

Registrován:
30 čer 2009 09:14
Příspěvky:
7165
Dobrý den,

pruh na straně způsobuje Vaše nestandardní úprava v souboru themes/default-bootstrap/css/product_list.css:

Kód:
ul.product_list .product-image-container a img.img_1{
  position:absolute;
  top:9px;
  left:53.5px;
  opacity:0;
  -webkit-transition: opacity 0.3s; /* Safari */
  transition: opacity 0.3s;
}


Nastavení levého okraje prvku (resp. obrázku) pomocí left:53.5px; právě způsobí nežádoucí pruh. Takže si upravte nastavení tohoto prvku pro menší rozlišení.

Jelikož spolu dotazy již nesouvisí, příště, prosím, pro nový dotaz vytvořte samostatné fórum.

_________________
Radek Plašil
Webhosting C4
https://www.c4.cz/


Nahoru
 Profil  
 
Zobrazit příspěvky za předchozí:  Seřadit podle  
Odeslat nové téma Odpovědět na téma  [ Příspěvků: 16 ]  Přejít na stránku 1, 2  Další

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků


Nemůžete zakládat nová témata v tomto fóru
Nemůžete odpovídat v tomto fóru
Nemůžete upravovat své příspěvky v tomto fóru
Nemůžete mazat své příspěvky v tomto fóru
Nemůžete přikládat soubory v tomto fóru

Hledat:
Přejít na:  
FTP Uploader
Staňte se naším zákazníkem!
Hledáme kolegy
PrestaShop partneři

Seznam všech partnerů

PrestaShop Hosting
Návody pro C4

© 2009-2019 ČESKÝ WEBHOSTING s.r.o. Kontaktní e-mail: forum@c4.cz
Diskuzní fórum využívá technologie: phpBB, phpBB-SEO.com, phpBB.cz