Guten Tag Wie einige ja schon wissen, arbeite ich gerade an Landingpages und nutze dafür die vom Shop gegebenen Möglichkeiten. Also den Content Manager mit unsichtbaren Inhaltsseiten. Nun treibt mich gerade die Darstellung auf dem Smartphone ein bisschen in den Wahnsinn... Ich würde nämlich gerne ohne Kompromisse den Mehr-Platz auf dem Desktop nutzen, ohne dafür aber die Smartphone Variante unbrauchbar zu machen. Leider kann ich ja keine zwei vollständig separat Inhalte erstellen. Anbei füge ich mal ein Bild wie ich mir z.B. einen wichtigen Teil einer meiner Landingpages vorstelle. Selbstverständlich hochprofessionell in Paint gezeichnet. Ich würde also gerne auf dem Desktop die 3 Elemente schön nebeneinander anorden da ich hier den benötigen Platz auch habe. Auf dem Smartphone soll es aber dann untereinander angezeigt werden. Gibts da Tricks / Möglichkeiten das so zu realisieren? Freue mich über jede Hilfestellung und wünsche noch einen sonnigen Sonntag Freundliche Grüsse
Das ist ganz simpel zu lösen. Schau mal in die Testshops von Gambio (Link nur für registrierte Nutzer sichtbar.) da ist auf der Startseite eine Zeile mit 2 Bildern nebeneinander (auf einem ist ein Sessel). Wenn Du das auf dem Smartphone öffnest, sind die Bilder dann untereinander. Den Code kannst Du im Admin kopieren und anpassen.
Hmm, okay mit 2 Bilder kriege ich es hin indem ich den Code halt einfach 1 zu 1 kopiere... Aber wie würde der Code mit 3 Bildern (die dann entsprechend kleiner sind) aussehen?Und dann halt noch Text unter jedem der drei Bilder. Ist das möglich? Für 2 Bilder ist der Code ja folgender: Code: <div class="row space-1"> <div class="col-xs-12 col-sm-6 space-1"> <a href="/shop4/Haus---Garten/Moebel---Wohnen/Dekoration/"><img class="img-responsive" src="images/content/index/design.jpg" /></a> </div> <div class="col-xs-12 col-sm-6"> <a href="/shop4/Haus---Garten/Moebel---Wohnen/Sofas---Sessel/"><img class="img-responsive" src="images/content/index/gemuetlichkeit.jpg" /></a> </div> </div>
versuch doch einfach mal den Code zu verstehen... 12 ist immer die Summer aller Spalten... wenn da col-sm-6 steht und das 2x dann wären doch 3 Spalten col-sm-4
Code mit Button Bildgröße 400x255 pixel Code: <div class="row three-col"> <div class="col-md-4 col-1"> <p> </p> <div class="thumbnail"> <img alt="alt-txt" class="img-responsive" src="images/bild.JPG" title="bildtitel" /> <div class="caption"> <h3><strong><span>überschrift</span></strong></h3> <p class="text-justify"> text<br /> </p> <p> <a class="btn btn-primary" href="https://www.xyz.de">Text</a> </p> </div> </div> </div> <div class="col-md-4 col-2"> <p> </p> <div class="thumbnail"> <img alt="alt-text-bild" class="img-responsive" src="images/bild.JPG" title="bild" /> <div class="caption"> <h3><strong><span>überschrift</span></strong></h3> <p class="text-justify"> text<br /> </p> <p> <a class="btn btn-primary" href="https://www.xyz.de">Text</a> </p> </div> </div> </div> <div class="col-md-4 col-3"> <p> </p> <div class="thumbnail"> <img alt="alt-txt-bild" class="img-responsive" src="images/bild" title="bildtitel" /> <div class="caption"> <h3><strong>überschrift</strong></h3> <p class="text-justify"> textp<br /> </p> <p> <a class="btn btn-primary" href="https://www.xyz.de">Text</a> </p> </div> </div> </div> </div>
Vielen Dank Michael! Das ist ja absolut fantastisch. Sieht exakt so aus wie in meiner Vorstellung Ich werde mich damit weiter auseinandersetzen, Problem bei mir ist manchmal die Vielfalt an Aufgaben und die wenig Zeit. Diese Row / Spalten Code ist für mich noch totales Neuland.
Hey Leute, Also ich hab das nun soweit fertig und bin auch zu 89% zufrieden Kleines Problem: Der Umbruch zwischen 3 nebeneinander und 3 untereiander geschieht einen Tick zu spät! Also es gibt eine bestimmte Größe, da ist das Layout durcheinander weil er noch nicht auf Untereinander wechselt. Das könnte auf einem Tablet wohl auftreten oder wenn man bei 1920x1080 das Browserfenster halt relativ klein hat. Kann man das irgendwie steuern wann er umbricht / wechselt ?
mit den Code von Michael weiß ich das nicht, mit dem anderen müsste das z.B. so gehen: HTML: <div class="row space-1"> <div class="col-xs-12 col-md-3 col-lg-4 colspace-1"> <a href="/shop4/Haus---Garten/Moebel---Wohnen/Dekoration/"><img class="img-responsive" src="images/content/index/design.jpg" /></a> </div> <div class="col-xs-12 col-md-3 col-lg-4"> <a href="/shop4/Haus---Garten/Moebel---Wohnen/Sofas---Sessel/"><img class="img-responsive" src="images/content/index/gemuetlichkeit.jpg" /></a> </div> <div class="col-xs-12 col-md-3 col-lg-4"> <a href="/shop4/Haus---Garten/Moebel---Wohnen/Sofas---Sessel/"><img class="img-responsive" src="images/content/index/Dein3-Bild" /></a> </div> </div> Damit hättest Du auf kleinen Bildschirmen 3 Untereinander auf mittleren 2 Nebeneinander und einen darunter und auf großen Bildschirmen 3 Nebeneinander