Witam, Do swojego sklepu wstawiłem na stronie głównej tabelę z podlinkowanymi zdjęciami do kategorii produktów. Całość ma zastępować "kategorie obrazkowe". Działa i jest OK ale... tabela ma stałą szerkość i Google wyrzuca mi info :Twoja strona nie będzie działać dobrze na urządzeniach mobilnych. Na tutejszym forum znalazlę kilka informacji jak można to obejść ale jako, że jestem "zielony" i to mój pierwszy sklep nie do końca wiem jak temat ugryźć. Pytanie brzmi: czy mam dokonywać jakiś zmian (coś dopisać) w samym module gdzie mam tabelę ( w edytorze) czy musze też dodać coś do CSS? Zakładam że tak, ale jaki kod? Będę wdzięczny jeśli ktoś się zmiłuje i pomoże
@RX_UA można zrobić to na 2 sposoby: 1. całkowicie usunąć moduł dla urządzeń mobilnych 2. dopasowywać dla poszczególnych rozmiarów ekranów Dla obu sposobów należy wykorzystać wpis w CSS Ad1. Code: @media only screen and (min-width: rozmiar w px) and (max-width: rozmiar w px){ #box_custom1 { display:none; } } Ad 2. Code: @media only screen and (min-width: rozmiar w px) and (max-width: rozmiar w px){ #box_custom1 table { width: 100%; } } Oczywiście wartości, należy dopasować.
nie polecam tak robić całą tabelę można w chwilę zrobić na stylach i wtedy dowolnie ją wyświetlać na dowolnej rozdzielczości. czas zwykłych tabel minął bezpowrotnie.
Chyba za cienki na to jestem. Moja tableka (kopia z panelu zarządznia clik shop) to: <table style="height: 101px;" width="900"> <tbody> <tr> <td style="width: 181px; vertical-align: bottom;"><a href="/ru_UA/c/%D0%A2%D0%BE%D1%87%D0%B5%D1%87%D0%BD%D1%8B%D0%B5-%D1%81%D1%82%D0%B5%D0%BA%D0%BB%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8/296"><img src="/public/assets//stieklodierzatieli.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%94%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D1%81%D1%82%D0%B5%D0%BA%D0%BB%D0%B0/267"><img src="/public/assets//dzierzatieli%20stiekla.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A1%D1%82%D0%B5%D0%BA%D0%BB%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB%D0%B0/333"><img src="/public/assets//stiekliannyie%20pierila.png" alt="" width="300" height="300" /></a></td> </tr> <tr> <td style="width: 181px;"> <a href="/ru_UA/c/%D0%93%D0%BE%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8-%D0%B4%D0%BB%D1%8F-%D0%BB%D0%B5%D1%81%D1%82%D0%BD%D0%B8%D1%86%2C-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB-%D0%B8-%D0%BE%D0%B3%D1%80%D0%B0%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B9/434"><img src="/public/assets//stolbiki%20elementy%20balustrad_new.png" alt="" width="300" height="303" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A1%D1%82%D0%B5%D0%BA%D0%BB%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BA%D0%BE%D0%B7%D1%8B%D1%80%D1%8C%D0%BA%D0%B8-%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D1%81%D1%8B/433"><img src="/public/assets//stiekliannyie%20naviesy_new.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/K%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D0%BF%D0%B0%D0%B9%D0%B4%D0%B5%D1%80/439"><img src="/public/assets//krieplienie%20spider.png" alt="" width="300" height="300" /></a></td> </tr> <tr> <td style="width: 181px;"> <a href="/ru_UA/c/P%D0%B8%D0%B3%D0%B5%D0%BB%D0%B5%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D0%94%D0%B5%D1%80%D0%B6%D0%B0%D1%82%D0%B5%D0%BB%D0%B8-%D0%BF%D1%80%D1%83%D1%82%D0%B0-%D0%BA-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B5/427"><img src="/public/assets//rigieledierzatieli.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A8%D0%B0%D1%80%D1%8B/293"><img src="/public/assets//szary.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%97%D0%B0%D0%B3%D0%BB%D1%83%D1%88%D0%BA%D0%B8/283"><img src="/public/assets//zagluszki.png" alt="" width="300" height="300" /></a></td> </tr> <tr> <td style="width: 181px;"> <a href="/ru_UA/c/%D0%9A%D0%BE%D0%BB%D0%B5%D0%BD%D0%B0%2C-%D1%81%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D0%B8/288"><img src="/public/assets//koliena%20soidienitieli.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9A%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D1%8F/386"><img src="/public/assets//krieplienie%20porucia.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9E%D0%BF%D0%BE%D1%80%D0%B0-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D1%8F/291"><img src="/public/assets//opora%20porucia.png" alt="" width="300" height="300" /></a></td> </tr> <tr> <td style="width: 181px;"> <a href="/ru_UA/c/%D0%9D%D0%B8%D0%B7-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8-%D1%88%D0%B0%D0%B9%D0%B1%D0%B0/277"><img src="/public/assets//niz%20stoiki%20szajba.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%B0-%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B8%2C-%D0%BA%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D1%82%D0%BEe%D0%BA%2C-%D0%BF%D0%B5%D1%80%D0%B8%D0%BB/364"><img src="/public/assets//osnova%20stoiki.png" alt="" width="299" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%A2%D1%80%D1%83%D0%B1%D1%8B-%D0%BD%D0%B5%D1%80%D0%B6%D0%B0%D0%B2%D0%B5%D1%8E%D1%89%D0%B8%D0%B5%2C-%D1%81%D1%82%D0%B5%D1%80%D0%B6%D0%BD%D0%B8%2C-%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D0%B8/325"><img src="/public/assets//truby%20nierzeiejusie%20profili.png" alt="" width="300" height="302" /></a></td> </tr> <tr> <td style="width: 181px;"> <a href="/ru_UA/c/%D0%94%D0%B5%D1%80%D0%B5%D0%B2%D1%8F%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BF%D0%BE%D1%80%D1%83%D1%87%D0%BD%D0%B8/299"><img src="/public/assets//drew%20poruci.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%9A%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0/342"><img src="/public/assets//kabielnaja%20sistiema.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> <a href="/ru_UA/c/%D0%97%D0%B0%D0%BA%D0%BB%D1%91%D0%BF%D0%BE%D1%87%D0%BD%D1%8B%D0%B5-%D0%B3%D0%B0%D0%B9%D0%BA%D0%B8%2C-%D0%B1%D0%BE%D0%BB%D1%82%D1%8B%2C-%D0%B2%D0%B8%D0%BD%D1%82%D1%8B%2C-%D1%80%D0%B5%D0%B7%D1%8C%D0%B1%D0%BE%D0%B2%D1%8B%D0%B5-%D1%81%D1%82%D0%B5%D1%80%D0%B6%D0%BD%D0%B8/319"><img src="/public/assets//gajki%20bolty.png" alt="" width="300" height="301" /></a></td> </tr> <tr> <td style="width: 181px;"><a href="/ru_UA/c/%D0%A4%D0%B8%D1%82%D0%B8%D0%BD%D0%B3%D0%B8-%D0%B4%D0%BB%D1%8F-%D0%B4%D1%83%D1%88%D0%B5%D0%B2%D1%8B%D1%85-%D0%BA%D0%B0%D0%B1%D0%B8%D0%BD/414"><img src="/public/assets//dlia%20duszevych%20kabin.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"><a href="/ru_UA/c/%D0%9A%D0%BB%D0%B5%D0%B8%2C-%D0%B0%D0%BD%D0%BA%D0%B5%D1%80%D1%8B%2C-%D1%85%D0%B8%D0%BC%D0%B8%D1%8F/318"><img src="/public/assets//kleje%20kotwy.png" alt="" width="300" height="300" /></a></td> <td style="width: 182px;"> </td> </tr> </tbody> </table> <p> </p> I szczerze mówiąc nie wiem gdzie powstawiać te polecenia Div itd. I jak dalej przejść do własnych stylów. Sukam w necie, czytam, ale większość porad i komentarzy jest chyba dla osób bardziej zaawansowanych ode mnie. NIestety, brak edukacji nie procentuje..
Pojechałem na Ukrainę i zaprzyjżniony informatyk mi to zrobił "od ręki". Ale dziękuję wszystkim którzy odpowiedzieli na mój post. Dobrze jest wiedzieć że są jeszcze ludzie którzy chętnie pomagają.
A co w przypadku tabeli takiej jak na stronie https://watercheck.com/pages/product-selection-guide ? O ile samą tabelę stworzyłem bez problemu, o tyle pojawiają się dwa problemy. 1 - jak obrócić tekst o 90 stopni zachowując odpowiednie przeskalowanie komórki? 2- jak wykonać takie skalowanie dla wersji mobilnej, które dopasuje całą tabelkę do strony a nie będzie tworzył żadnego bootstrapa? Z racji że większość tabeli jest zbudowana z "X", nie ma sensu jej przesuwanie. Najprostszym rozwiązaniem było wstawienie tabelki w formie graficznej, wtedy sama się ładnie skalowała, ale chcę podlinkować poszczególne porównywane produkty analogicznie jak na stronie w.w. i się zrobił dla mnie spory problem. Walczę z tym już drugi dzień, testowałem już wszelakie tabele responsywne i zawszę w którymś momencie utknę. Spodziewam się że dla bardziej doświadczonej osoby to rozwiązanie jest banalnie proste. Adres mojego sklepu to https://aqlab.pl/pl/i/Porownanie-produktow/21
@jakubbereta tekst o 90 stopni obrócisz w css używając dyrektyw poniżej: Code: /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); W przypadku responsywności, należy ustawić ją procentowo tak jak przedstawiłem w jednym z powyższych wpisów.
Zadanie rozwiązane. Do wglądu: https://aqlab.pl/pl/i/Porownanie-produktow/21 Gdyby ktoś był zainteresowany taką tabelką to wrzucam gotowca z mojej strony: HTML: HTML: <center> <div class="ps_table-box"> <div class="ps-labels"> <div class="ps-labels-spacer"> </div> <div class="ps-label-box"> <div class="ps-label">Badania bakteriologiczne</div> </div> <div class="ps-label-box"> <div class="ps-label">Legionella</div> </div> <div class="ps-label-box"> <div class="ps-label">Metale ciężkie</div> </div> <div class="ps-label-box"> <div class="ps-label">Wskaźniki organoleptyczne</div> </div> <div class="ps-label-box"> <div class="ps-label">Substancje nieorganiczne</div> </div> <div class="ps-label-box"> <div class="ps-label">Chlor</div> </div> <div class="ps-label-box"> <div class="ps-label">Uboczne produkty dezynfekcji</div> </div> <div class="ps-label-box"> <div class="ps-label">Azotany/Azotyny</div> </div> <div class="ps-label-box"> <div class="ps-label">Fluorki</div> </div> </div> <div class="ps-title-box"> <div class="ps-labels-spacer-long"> <div class="ps-sep-title">Ujęcia prywatne (studnie)</div> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Kombi/74">Kombi</a></div> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Standard/75">Standard</a></div> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Podstawowy/76">Podstawowy</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Mikrobiologia/77">Mikrobiologia</a></div> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Azotanyazotyny/78">Azotany/Azotyny</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Fluorki/79">Fluorki</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie/80">Metale ciężkie</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie-w-instalacji-wewnetrznej/81">Metale ciężkie w instalacji wewnętrznej</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-title-box"> <div class="ps-labels-spacer-long"> <div class="ps-sep-title">Ujęcia komunalne</div> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Kombi/82">Kombi</a></div> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Standard/83">Standard</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Podstawowy/84">Podstawowy</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Mikrobiologia/85">Mikrobiologia</a></div> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Fluorki/86">Fluorki</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Metale-ciezkie-w-instalacji-wewnetrznej/87">Metale ciężkie w instalacji wewnętrznej</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> <div class="ps-title-box"> <div class="ps-labels-spacer-long"> <div class="ps-sep-title">Woda ciepła</div> </div> </div> <div class="ps-table-row"> <div class="ps-labels-spacer"> <div class="ps-test-title"><a class="psg-link w-inline-block" href="/pl/p/Legionella/88">Legionella</a></div> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"><img class="ps-check-on" src="/public/assets/Ikonki/check.png" alt="" /></div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> <div class="ps-check-box"> </div> </div> </div> </center> CSS: Code: .ps_table-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 50px; padding-bottom: 100px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ps-labels { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70%; height: 290px; min-width: 750px; text-align: left; } .ps-labels-spacer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 28%; padding-right: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; border-right: 1px solid #04445F; font-family: Oswald, sans-serif; color: #04445F; font-size: 18px; } .psg-link{ text-decoration: underline; color: #0000EE; text-align: right; } .ps-label-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 6%; padding-bottom: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right: 1px solid #04445F; border-left: 0px solid #04445F; font-family: Oswald, sans-serif; font-weight: bold; font-size: 19px; } .ps-label { width: 290px; -webkit-transform: rotate(-90deg) translate(50%, 0px); -ms-transform: rotate(-90deg) translate(50%, 0px); transform: rotate(-90deg) translate(50%, 0px); color: #04445F; } .ps-table-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70%; height: 60px; min-width: 750px; border-bottom: 1px solid #04445F; } .ps-check-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 6%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right: 1px solid #04445F; border-left: 0px solid #04445F; } .ps-test-title { text-align: right; } .ps-check-on { height: 30%; } .ps-title-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70%; height: 50px; min-width: 750px; background-color: #04445F; } .ps-sep-title { color: #f0f0f0; text-align: right; } .ps-labels-spacer-long { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 28%; padding-right: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; border-right: 1px solid #04445F; font-family: Oswald, sans-serif; color: #04445F; font-size: 18px; } @media (max-width: 991px) { .ps-labels { width: 95%; min-width: auto; } .ps-labels-spacer { font-size: 16px; } .ps-table-row { width: 95%; min-width: auto; } .ps-check-on { width: 50%; height: auto; } .ps-title-box { width: 95%; min-width: auto; } .ps-labels-spacer-long { font-size: 16px; } @media (max-width: 767px) { .ps-labels { width: 95%; height: 200px; } .ps-labels-spacer { padding-right: 10px; font-size: 12px; } .ps-label { font-size: 12px; } .ps-table-row { width: 95%; height: 50px; } .ps-title-box { height: 32px; } .ps-labels-spacer-long { padding-right: 10px; font-size: 12px; } @media (max-width: 479px) { .ps_table-box { padding-bottom: 35px; } .ps-labels { height: 180px; } .ps-labels-spacer { padding-right: 10px; padding-left: 10px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ps-label { font-size: 10px; } .ps-table-row { height: 40px; } .ps-test-title { line-height: 16px; text-align: center; } .ps-title-box { height: auto; padding-top: 5px; padding-bottom: 5px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ps-sep-title { text-align: center; } .ps-labels-spacer-long { width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } }}}
Co by należało zrobic zeby prostą tabelę RWD wstawić w opis produktu. Mniej więcej jak w kreatorze allegro się wrzuca. Przykład wierszami tabeli: Lewa strona opis - prawa zdjęcie Lewa zdjęcie - prawa opis Sam opis Samo zdjęcie itd Może coś prostego podpowiecie w html? Szkoda, że kreatora dobrego nie ma w sklepie.
