Právě je 28 bře 2024 12:39

Všechny časy jsou v UTC + 1 hodina




Odeslat nové téma Odpovědět na téma  [ Příspěvků: 2 ] 
Autor Zpráva
 Předmět příspěvku: PrestaShop - Responsivní tabulka s obrázky
PříspěvekNapsal: 05 led 2019 22:03 
C4 zákazník

Registrován:
18 dub 2017 12:03
Příspěvky:
25
Rád bych se dotazoval na toto téma, když přidávám článek respektive "text" v záložce "Konfigurace" - "Stránky CMS" a potřebuji jej doplnit o menší obrázky, kterých se vejde na řádek více tak je klasicky vyskládám do buněk tabulky. Na veřejné části obchodu na stolním PC je to dobré, ale při prohlížení na mobilu musím posouvat prstem doprava (horizontálně) a nikoliv rolovat pěkně jen ve vertikálním směru. Jak mám tabulku upravit, aby se mi obrázky v tabulce na mobilu zobrazovali pěkně pod sebou (responsivně) a nikoliv neresponsivně?
Děkuji


Nahoru
 Profil  
 
 Předmět příspěvku: Re: PrestaShop - Responsivní tabulka s obrázky
PříspěvekNapsal: 08 led 2019 15:28 
C4 podpora
C4 podpora

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

pokud pro zobrazení potřebujete použít vyloženě tabulku, tak jí budete muset nadefinovat vlastní CSS styly. Takže například budete mít tabulku, které nastavíte vlastní třídu mojetabulka:
Kód:
<table class="mojetabulka">
    <tbody>
      <tr>
          <td>Obrázek</td>
          <td>Obrázek</td>
          <td>Obrázek</td>
      </tr>
      <tr>
          <td>Obrázek</td>
          <td>Obrázek</td>
          <td>Obrázek</td>
      </tr>
    </tbody>
  </table>

A pak pomocí CSS stylů nadefinujete, že do šířky 768 pixelů (768px) se budou jednotlivé buňky zobrazovat na samostatném řádku:
Kód:
@media screen and (max-width:768px){
  .mojetabulka td { display:block; width:100%; }
}


A nebo by se dal pro zobrazení obrázků použít Bootstrap framework, který Vaše šablona také používá. Kód s obrázky by pak mohl vypadat například:
Kód:
<div class="row">
  <div class="col-sm-4">Obrázek</div>
  <div class="col-sm-4">Obrázek</div>
  <div class="col-sm-4">Obrázek</div>
</div>
<div class="row">
  <div class="col-sm-4">Obrázek</div>
  <div class="col-sm-4">Obrázek</div>
  <div class="col-sm-4">Obrázek</div>
</div>
Na další ukázky se můžete podívat například na stránce Bootstrap grid examples.

_________________
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ů: 2 ] 

Všechny časy jsou v UTC + 1 hodina


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-2024 ČESKÝ WEBHOSTING s.r.o. Kontaktní e-mail: forum@c4.cz
Diskuzní fórum využívá technologie: phpBB, phpBB-SEO.com, phpBB.cz