Grüß euch! bitte mir fehlt komplett der Ansatz wie ich meinen Shop für Smartphones und Tablets einrichten kann. Kann mir bitte jemand auf die Sprünge helfen? Muss ich im Style Edit für Desktop, Smartphone u. Tablet einen neuen Style erstellen oder mach ich das alles in einem Style? Danke für eure Hilfe im Voraus! Lg Sabine
Hallo Sabine du machst alles in einem Style. Im StyleEdit kannst du die Spalten für Groß (Desktop), Mittel(Tablet) und klein (Handy) einstellen. Du kannst im StyleEdit einstellen welche Auflösung er dir anzeigen soll.
Und ja ist alles in einem - responsive Template = Anpassendes Template für versch. Bildschirmgrößen. Man stellt ein was bei welcher Größe zu sehen sein soll und was evtl. nicht. und wie große es sein soll (Grid-Spalten) Die Grid-Spalten sind IMMER 12 SPalten du bestimmst über wieviel SPalten ein Bereich gehen soll. ABER am ende muss die Seite immer 12 Spalten breit sein. (Stell dir wie eine Tabelle vor die IMMER 12 SPalten hat und du kannst die Spalten verbinden um Bereiche zu verhrößern aber die Gesamtanzahl bleibt immer gleich.)
Lieber Michael, lieber Dennis, danke! Bitte kannst du mir noch ein bisschen mehr helfen? Das mit den 12 habe ich mir schon angelesen im Blogg. Wieso kommt der Text bei mir so wie im Bild. aicher-gmbh.com Vielen Dank! Lieben Gruß Sbine
Hallo Sabine, du hast dir eine Tabelle für den Text eingefügt. Das klappt so wie nicht responsive. Tabellen responsive zu erstellen ist glaube ich auch nicht so einfach. Den Text musst du anders einfügen.
generell gilt - statt festen Pixelwerten Prozentangaben verwenden wo es sinn macht oder maximal und minimal werte vergeben. Insgesamt ist responsive Design komplexer und schwerer als fürher das statische feste Template, da man jetzt für alle Breiten schauen muss oder wenigstens für die gängigsten (Handy Hoch und queer - Tablett hoch und Queer und Desktop Version.) sollte man sich immer mal ansehen. ANsonsten investier doch mal 100-200 EUR und lass dir von nettdex ein template erstellen bzw. anpassen - die sind top, schnell und haben schon extrem vielen geholfen.
Hallo Ich bekomme es nicht hin, was mach ich falsch? Vielen Dank im voraus für die Hilfe <table class="dcf-table dcf-table-responsive dcf-table-bordered dcf-w-100%"> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>
versuch es mal so: HTML: div class="row"> <div class="col-xs-12 col-md-8 col-lg-6"> <table class="table table-striped table-features"> <thead> <tr> <th colspan="1" >Überschrift 1</th> <th colspan="1" >Überschrift 2</th> </tr> </thead> <tbody> <td>Text Spalte 1</td> <td>Text Spalte 2</td> </tr> <tr> <td>Text Spalte 1</td> <td>Text Spalte 2</td> </tr> <tr> <td>Text Spalte 1</td> <td>Text Spalte 2</td> </tr> </tbody> </table> </div> </div> Die Col-Werte kannst Du nach Deinen Wünschen anpassen, ist jetzt auf dem Handy ganze Breite, auf dem Tablet 3/4 Breite und auf dem PC halbe Breite
Versuche dieses einfach mal einzufügen, hatte das mal aus einem Gambio-Testshop und funktioniert auch noch unter 4.2. HTML: <div class="artikel-table"> <div class="table-responsive"> <table class="table table-striped table-features"> <thead> <tr> <th colspan="2">Abmessungen</th> </tr> </thead> <tbody> <tr> <td>Höhe</td> <td>42cm</td> </tr> <tr> <td>Länge</td> <td>107cm</td> </tr> <tr> <td>Breite</td> <td>13cm</td> </tr> <tr> <td>Tiefe</td> <td>66cm</td> </tr> </tbody> </table> <table class="table table-striped table-features"> <thead> <tr> <th colspan="2">Energieverbrauch</th> </tr> </thead> <tbody> <tr> <td>Energieeffizienzklasse:</td> <td>A+</td> </tr> <tr> <td>Leistungsaufnahme</td> <td>60 Watt</td> </tr> </tbody> </table> <table class="table table-striped table-features"> <thead> <tr> <th colspan="2">Material</th> </tr> </thead> <tbody> <tr> <td>Oberseite</td> <td>Aluminium (gebürstet)</td> </tr> <tr> <td>Unterseite</td> <td>Kunststoff</td> </tr> </tbody> </table> <table class="table table-striped table-features"> <thead> <tr> <th colspan="2">Garantie & Gewährleistung</th> </tr> </thead> <tbody> <tr> <td>Garantie</td> <td>2 Jahre</td> </tr> <tr> <td>Gewährleistung</td> <td>2 Jahre</td> </tr> </tbody> </table> </div> </div>
Hallo Gerd, lieben Dank. Leider muss ich am Handy immer noch nach rechts Scrollen. Ich füge halt in die Tabelle noch ein Bild links ein und rechts den Text.
Wie schon Barbara schrieb mache das Bild class="img-responsive" und begrenze die Weite, dann passt das auch mobil. <td style="width: 50%;"> <img class="img-responsive" scr="Pfad/zum/Bild/meinBild" title="meinBild" alt="meinBild"> </td > Nachtrag: wichtig das der Text daneben automatisch umbricht: <td style="white-space: break-spaces;"> Das ist dein Text dazu </td>