Spaltenanordnung im mobilen Layout (Barcelona)

01.12.2017 16:09 (zuletzt bearbeitet: 01.12.2017 16:11)
avatar  Gouvi
#1
Go

Hallo,

ich habe folgendes Problem:

Bei Erstellen meiner Bandpage möchte ich gerne alle 5 Bandmitglieder kurz mit Name und Bild vorstellen. Dabei sind einmal 3 und einmal 2 Bandmitglieder als einzelne Bilder nebeneinandergesetzt und jeweils über jeder der beiden Bildreihen eine Überschriftenzeile in der ich dann über jedem Bild jeweils den Namen der Person auf dem Bild darunter geschrieben habe.
Schematisch sieht das Ganze also so aus:

Überschrift 1 | Überschrift 2 | Überschrift 3
Bild 1 | Bild 2 | Bild 3
Überschrift 4 | Überschrift 5
Bild 4 | Bild 5

in der normalen Desktop-Ansicht gefällt mir das ganze auch so. Nur habe ich das Problem, dass in der mobilen Ansicht zuerst die Überschriften 1-3, dann die Bilder 1-2, dann die Überschriften 4+5 und dann die Bilder 4+5 jeweils untereiandner angereiht sind, sodass das ganze dann natürlich nicht mehr wirklich passt und nach etwas aussieht. Gibt es da irgendwie eine Möglichkeit, dass in der mobilen Ansicht die Überschriften auch über den jeweiligen Bildern erscheinen? Ich kann leider auch kein Element finden, dass es mir erlaubt ein Bild mit Überschrift als ein komplettes Element zu erstellen, sondern ich muss immer jeweils dafür eine Überschriften-Zeile und eine Bild Zeile erstellen.

Habt ihr da Tips oder Vorschläge wie das mein Problem lösbar/umgehbar wäre?
Vielen Dank für eure Hilfe schon einmal im Voraus!


 Antworten

 Beitrag melden
01.12.2017 17:39
avatar  az_
#2
avatar
az_

...nimm einfach 2 Spaltenelemente untereinander, eines mit 3 Spalten und eines mit 2 (oder auch 3) Spalten.

in jede Spalte setzt Du dann zuerst das Bild und darunter den Text. Auf diese Weise bleiben die zusammengehörigen Content-Teile auch in mobilen Ansichten zusammen.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
01.12.2017 20:24
avatar  Gouvi
#3
Go

Danke für die Antwort. Tatsächlich hatte ich irgendwie für jede Zeile ein neues Spaltenelement genommen, was dann dieses Problem verurasacht hat. Dankeschön :)


 Antworten

 Beitrag melden
21.06.2018 08:03
avatar  Sigi
#4
Si

Da meine Frage genau in die gleiche Richtung geht, habe ich kein neues Thema erstellt.

Folgende Schwierigkeit bei mir:

Ich habe ein "Bild mit Text"-Fenster erstellt. Links ist das Bild, rechts der Text. Der Text ist im Textfeld allerdings ziemlich weit unten. Erreicht habe ich das, indem ich ein paar Zeilenumbrüche eingegeben habe. Im Quelltext, also ein paar mal:

1
 
<p>&nbsp;</p>
 



und dann kommt der Text.

In der normalen Browseransicht ist alles ok. In der mobilen Ansicht erscheint das Bild und dann unten drunter ein paar Zeilen tiefer der Text zum Bild. Wie kriege ich den Text neben das Bild, also genau so wie im normalen Browser?


 Antworten

 Beitrag melden
15.07.2018 18:42 (zuletzt bearbeitet: 15.07.2018 18:44)
avatar  az_
#5
avatar
az_

Das geht nur mit CSS: float: left; und die Breite bestimmen.
Oder nur einen Zwischen Absatz setzen und dem eine Klasse geben, die nur in der Desktop Ansicht einen Abstand generiert (@media)


LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!