Hallo Leute Heute geht es mir um den Freigestaltbaren Bereich im Header. Ich nutze diesen Bereich für einen kurzen, knackigen Text. Leider, trotz der Kürze, kommt es auf dem iPad im Portrait Modus aber dazu, dass der Text unten abgeschnitten ist. Sieht einfach nicht sauber aus. Daher nun meine Frage: Ich habe ja im Content Manager die Möglichkeit dieses Freigestalbaren Bereich im Editor mit HTML / Quellcode zu befüllen - wäre es da nicht auch irgendwie möglich zwei Versionen anzulegen? Eine für grosse Displays und dann eine Version für kleinere Displays? Freundliche Grüsse
Versuches mit: Code: <div class="start_eins hidden-xs"> hier der Text für PC und Co </div> <div class="start_zwei hidden-sm hidden-md hidden-lg"> hier der Text für Smartphone </div> Eventuell musst Du das "hidden sm" noch nach oben nehmen.
Also es klappt das der kleine Text nicht angezeigt wird. Ich sehe nur den Grossen Text "hier der Text für PC und Co". Aber wenn ich den Browser dann kleiner ziehe, bleibt nur dieser stehen und der kleine wird gar nicht angezeigt.
Dann muss das hidden-sm verschoben werden. Code: <div class="start_eins hidden-xs hidden-sm"> hier der Text für PC und Co </div> <div class="start_zwei hidden-md hidden-lg"> hier der Text für Smartphone </div>
Hmm irgendwie ist der Wurm drin. Das hat leider auch nichts gebracht... Habe mal aus Spass bisschen an den Grössen Angaben gespielt und wenn ich es so mache, erreiche ich zumindest das der Smartphone Text erscheint, sobald ich den Browser kleiner ziehe: Code: <div class="start_eins hidden-xs hidden-sm"> hier der Text für PC und Co </div> <div class="start_zwei hidden-xs hidden-lg"> hier der Text für Smartphone </div>
Du sagst da aber zwei mal "hidden xs" , damit verbietest Du 2x die Anzeige für Smartphones Man könnte das noch mit css lösen Hast Du mal einen Link
Ja, sehr seltsam oder? Obwohl ich das zweimal reinschreibe wird es aber in der großen Version trotzdem ausgeblendet und dann bei der Kleinen eingeblendet. Ich blicke da auch nicht so richtig durch Habs mal hier schnell reingesetzt, selbes Ergebnis (Link nur für registrierte Nutzer sichtbar.)
<< in der großen Version trotzdem ausgeblendet und dann bei der Kleinen eingeblendet >> hört sich nach media queries an. Abhängig von der Dispalygröße wird da was ein-oder ausgeblendet
wenn man sich im Test Shop 2 die Versandkosten Tabelle im Quellcode anschaut, dann sieht man welcher Code benötigt wird um es zwischen Handy und PC Ansicht zu steuern... Dort unterscheidet man zwischen - hidden-xs und - hidden-sm hidden-md hidden-lg
Ich habe das mal bei mir getestet: Auf dem Handy wird das gar nicht ausgegeben, deshalb bringt "hidden-xs" nicht wirklich etwas Es gibt also noch sm; md und lg Mein Quellcode: Code: <div class="start_1 hidden-sm hidden-md" style="text-align: center;"> hier stehet mein lager<br /> Text für PC und Laptop </div> <div class="start_2 hidden-sm hidden-lg" style="text-align: center;"> hier stehet mein<br /> Text für Tablets </div> <div class="start_3 hidden-md hidden-lg" style="text-align: center;"> hier stehet mein<br /> kleiner Text </div> von 768px - 991px steht der kleine Text von 992px - 1299px steht der Text für Tablets ab 1300px steht der Text für PC. Ich hatte noch einen alten css-Code für "start_zwei", der die Anzeige durch media-queries regeln sollte. der funkte dazwischen, deshalb habe ich die classe auf "start_2" geändert. @DrGuu könnte das bei Dir auch sein?
Sorry für die späte Rückmeldung, habe es etwas nach hinten verschoben und erst jetzt wieder Zeit zum testen gehabt. Es funktioniert mit Barbaras Code einwandfrei! Genial, ich danke dir sehr. Endlich keine abgeschnittenen Texte auf dem iPad mehr