1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

ROZWIĄZANE Dostosowanie tabeli do formatu RWD

Dyskusja w 'Sklep internetowy' rozpoczęta przez użytkownika RX_UA, 17 Kwiecień 2018.

  1. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    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 :)
     
  2. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    639
    Docenione treści:
    66
    @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.
    Kod:
    @media only screen and (min-width: rozmiar w px) and (max-width: rozmiar w px){
    #box_custom1  {
     display:none;
    }
    }
    Ad 2.
    Kod:
    @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ć.
     
  3. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 350
    Docenione treści:
    511
    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.
     
    RX_UA lubi to.
  4. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    639
    Docenione treści:
    66
    @RX_UA udało się dopasować Twoje rozwiązanie do RWD ?
     
  5. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
     
  6. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    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..
     
  7. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0
    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ą.
     
  8. LukaszC

    LukaszC eCommerce Team home.pl Moderator forum

    Wiadomości:
    639
    Docenione treści:
    66
    @RX_UA w takim wypadku ustawiam status rozwiązany.
     
  9. RX_UA

    RX_UA Początkujący

    Wiadomości:
    5
    Docenione treści:
    0

Poleć forum znajomym