Bilder im Beitrag – mobile Ansicht

Gelöst sommerfuglen22
(@sommerfuglen22)

vor 1 Jahr

Hallo ihr Lieben,

ich habe Beiträge mit Bildern erstellt und bin unzufrieden mit der Anzeige auf dem Handy. Ich habe die Bilder in den Text eingefügt (entweder links- oder rechtsbündig) und eine mittlere Größe ausgewählt. Auf dem Handy wird es dann aber so angezeigt, dass es ein kurzes Wort neben dem Bild steht und der Rest dahinter. Gibt es eine Möglichkeit auszuwählen, dass erst das Bild und dann der Text angezeigt wird? Ich weiß, dass das bei der Auswahl „Bild und Text“ geht, aber dann sind die Bilder nicht so elegant in den Text eingefügt, sondern es gibt immer Lücken.

Vielleicht kann mir ja jemand helfen 🙂

Liebe Grüße

Dana

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 9 Antworten – 1 bis 9 (von insgesamt 9)

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr
Hallo,
wenn du den Block „Medien und Text“ verwendest, würde ich dir stattdessen dazu raten, einen Spaltenblock mit zwei Spalten (z. B. Bild in linker Spalte, Text in rechter Spalte) zu verwenden.

Aber ich vermute, dass du den Classic Editor verwendest. Da wird das nicht funktionieren. In dem Fall würde ich dir raten, dich mit dem Block Editor anzufreunden, weil man da wesentlich mehr Möglichkeiten hat, siehe z. B. hier

Viele Grüße
Hans-Gerd
- Diese Antwort wurde vor 1 Jahr von Hans-Gerd Gerhards geändert.
Anonymous User 20597857
(@anonymized-20597857)

vor 1 Jahr

Sorry, aber mit einer CSS Medienabfrage geht das Null Problemo – egal welcher Editor …
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr
Hallo @kurapika,
stimmt – grundsätzlich wäre eine Media Query in solchen Fällen möglich.
Aber trotzdem erhält man mit einer Media Query in dem Fall keine besonders befriedigende Lösung. Besser ist auf jeden Fall die Verwendung des Spalten-Blocks, wenn der Block Editor verwendet wird.

@sommerfuglen22: füge bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS ein:
```
@media only screen and (max-width: 767px) {
    figure.alignleft, img.alignleft, figure.alignright, img.alignright {
        float:none;
        margin: 1em auto 1em auto;
    }
}
```
Viele Grüße
Hans-Gerd
Anonymous User 20597857
(@anonymized-20597857)

vor 1 Jahr

Aber trotzdem erhält man mit einer Media Query in dem Fall keine besonders befriedigende Lösung

Naja, wenn die Bilder mit 300 oder nur 150 px begrenzt sind, schauts nicht gut aus.
Wenn groß genug, schauts oke aus:

Thread-Starter sommerfuglen22
(@sommerfuglen22)

vor 1 Jahr

Hallo ihr Zwei,
danke für eure Tipps! Das Teste ich aus. Einen Spaltenblock habe ich schon ausprobiert, da fand ich nur unpraktisch, dass der Text das Bild nicht mehr umfließt. Wenn z.B. der Text länger ist, als das Bild, steht das Bild da etwas verloren mit einer Lücke dadrunter. Aber dann muss ich wahrscheinlich etwas von dem Text wieder in einen Textblock packen, dann würde es ja wieder passen, denke ich.
Lieben Dank euch für die Tipps!

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr

Danke für die Rückmeldung.

Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:

Die Option findest du rechts in der Sidebar. Danke.
Wieso soll ich mein Problem als „gelöst“ markieren?

Thread-Starter sommerfuglen22
(@sommerfuglen22)

vor 1 Jahr

Kannst du mir noch einmal erklären, was das zusätzliche css macht? Das habe ich grade eingefügt und bisher ändert sich noch nichts.

Liebe Grüße und vielen Dank!
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr
Hallo,
damit soll erreicht werden, dass die Bilder bis 767px ohne einen umfließenden Text gezeigt werden.

Ich sehe, dass du die CSS-Regel eingefügt hast, die aber nicht wirkt.

Sonst teste mal bitte, wenn du die Regel wie folgt am Ende einfügst (die o.g. Regel dann bitte löschen):
```
@media only screen and (max-width: 767px) {
    figure.alignleft, img.alignleft, figure.alignright, img.alignright {
        float:none!important;
        margin: 1em auto 1em auto!important;
    }
}
```
Viele Grüße
Hans-Gerd
Thread-Starter sommerfuglen22
(@sommerfuglen22)

vor 1 Jahr

Toll, so gehts!
Entschuldigen brauchst du dich nicht, sondern ich bedanke mich sehr demütig für die wiederholte Hilfe!!