Responsive Tabelle mit Bild und Test - Shortcodes Ultimate hilft nicht weiter

  • Hallo Leute,

    ich versuche schon seit Tagen eine Tabelle zu erstellen, die Bilder und Text enthält in den einzelnen Spalten. Jedoch habe ich bisher kein Plugin außer "Shortcodes Ultimate" gefunden, welches das kann.

    Das Problem an "Shortcodes Ultimate": Siehe Bild

    Wenn ich mein Browserfenster von der Breite kleiner mache, dann überlappt die Sidebar irgendwann mit der Tabelle. Zudem Hätte ich gerne, dass die einzelnen Spalten dann untereinander angezeigt werden. (Aktuell bleibt es eine Tabelle, auch beim Smartphone, sodass ich in der Tabelle nach links/rechts wischen muss um den Inhalt zu sehen.

    Könnt ihr mir da weiterhelfen?
    Oder muss ich in Shortcode was ändern?

    Danke schonmal

    • 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

  • Du nutzt Shortcodes Ultimate, soweit ist das ok. Aber nutzt du wirklich Tabellen dafür? Das wäre der falsche Ansatz. Du kannst besser mit Reihen und Spalten arbeiten. Dieser Code z. B. stellt eine Reihe mit 2 Spalten (50% / 50%) dar

    Code
    [su_row]
        [su_column size="1/2"]Bild und Text[/su_column]
        [su_column size="1/2"]Bild und Text[/su_column]
    [/su_row]

    Es gibt natürlich auch die Möglichkeit in 3 oder 4 Spalten aufzuteilen

    Code
    [su_row]
        [su_column size="1/3"]Bild und Text[/su_column]
        [su_column size="1/3"]Bild und Text[/su_column]
        [su_column size="1/3"]Bild und Text[/su_column]
    [/su_row]

    Ich hoffe du verstehst das Prinzip. Dieser Code ist dann auch auf mobilen Geräten nutzbar

    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]

  • Hallo SirEctor,

    Danke für den Hinweis.
    Das Funktioniert schonmal ganz gut, zumindest auch auf mobilen Endgeräten. Das einzige was mich an "su row" stört ist, dass der Inhalt nicht wie bei Tabellen direkt neben einander sind, sondern zwischen den Spalten einen Abstand haben.

    Den kann ich nicht so einfach beheben?
    Undzwar habe ich innerhlab der "columns" eine einspaltige Tabelle eingefügt.

    Grüße

  • Hallo SirEctor

    Vielen Dank, das hat jedenfalls schonmal weitergeholfen in Sachen mobiler Ansicht. Was mich bei den Funktion

    Code
    [su_row]
        [su_column size="1/2"]Bild und Text[/su_column]
        [su_column size="1/2"]Bild und Text[/su_column]
    [/su_row]

    noch stört ist, dass zwischen den einzelnen Spalten noch Platz ist. Wäre es die Columns auch so darstellen zu lassen, als wäre "eine" Tabelle. (Da trennt sozusagen eine Linie den Inhalt)
    Jetzt habe ich sozusagen 3 separate Spaltentabellen nebeneinander. Ich hoffe ich habe mich korrekt ausgedrückt

    Danke schonmal

  • Hallo SirEctor,

    hatte bereits geantwortet, aber irgendwie wurde der Beitrag noch nicht freigeben (deshalb versuche ich es nochmal)

    Vielen Dank für deinen Hinweis. Mit deiner Funktion sind die Elemente zumindest responsive auf mobilen Geräten.
    Das einzige was mich noch stört, ist der Abstand zwischen den "Columns".
    Undzwar habe ich in den einzelnen Columns eine einspaltige Tabelle mit 3 Zeilen hinzugefügt.
    Als Ergebnis habe ich natürlich 3 einzelne Tabellen.

    Was müsste man machen, damit die Tabellen zumindest auf großen Bildschirmen direkt nebeneinander sind, so als wäre es eine durchlaufende Tabelle ?
    Hoffe du verstehst was ich meine :)
    Grüße

Jetzt mitmachen!

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