Responsive Tabellen: Zeilen untereinander darstellen

  • Hoi zämä!

    Ich habe eine ganz einfache Tabelle "über uns" erstellt, in der jeweils in der ersten Spalte ein Foto und in der zweiten Spalte Text steht. Für Desktop und Tablet sieht's gut aus, für Smartphones werden die Bilder so klein, dass man nichts mehr erkennt. Gibt es eine Möglichkeit, dass die Zeilen untereinander angezeigt werden, also zuerst das erste Bild aus der ersten Spalte, danach darunter der Text aus der zweiten Spalte, dann das Bild aus der ersten Spalte aus der zweiten Zeile, etc. (sorry, ist wohl nicht so einfach, sich das vorzustellen)? Oder wäre es sowieso einfacher, das ganze gar nicht als Tabelle darzustellen?

    Ich verwende WordPress 4.9.8 mit dem Theme Twentyseventeen.
    Link zur Seite: http://naturdetektive.ccw01.snowflakehosting.ch/team/

    Vielen Dank für eure Hilfe!
    Nadia

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Versuch mal

    Code
    td{display:block;}


    in einem passenden media-query.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Lieber nature225 und SirEctor

    Vielen Dank für eure schnellen Antworten. Bootstrap konnte ich irgendwie nicht installieren, aber der Befehl

    td{display:block;}


    funktioniert super! Nur wird jetzt der Text der zweiten Spalte breiter als der Handybildschirm dargestellt. Gibt es eine einfache Möglichkeit, den Text auf die Displaybreite zu verkleinern?

    Lieber Gruss
    Nadia

  • Du hast den Spalten feste breiten gegeben. Entweder du löschst diese Angaben wieder, oder du versuchst mal das

    CSS
    td {
        display: block;
        width: 100% !important;
    }

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Tausend Dank SirEctor! War meine erste Frage in einem Forum und ich bin also begeister, wie schnell und treffsicher da die Antworten reinschneien :). Jetzt klappt alles. Lieber Gruss

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!