Bild neben Bild auf Smartphone

Gelöst 7kontinente
(@7kontinente)

vor 4 Jahren, 5 Monaten

Hallo zusammen

In Gutenberg gibt es ja die Möglichkeit, zwei Bilder nebeneinander zu positionieren, also links/rechts. Auf dem Desktop ist das eine feine Sache, aber auf dem Smartphone sind die Bilder dann viel zu klein.

Übersehe ich etwas, oder gibt es nicht die Möglichkeit, die Bilder auf dem Smartphone nicht nebeneinander, sondern untereinander zu positionieren. Damit diese auch grösser erscheinen.

Habe bisher dafür ein Plugin genutzt, dieses wird aber nicht mehr mit Gutenberg unterstützt.

Viele Grüsse

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

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 5 Monaten
Hallo,
hast Du das schon mal mit Bildern in Spalten bei Gutenberg getestet ? – damit hatten wir bis dato keine Probleme.
Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 4 Jahren, 5 Monaten von Hans-Gerd Gerhards.
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren, 5 Monaten
Das lässt sich über eine eigene CSS-Regel steuern.

Im neuen Theme Twenty Twenty wird für eine zweispaltige Galerie z.B. folgende CSS-Regel verwendet:
```
.blocks-gallery-grid .blocks-gallery-image, 
.blocks-gallery-grid .blocks-gallery-item, 
.wp-block-gallery .blocks-gallery-image, 
.wp-block-gallery .blocks-gallery-item {
    width: calc((100% - 16px)/2);
}
```
Mit calc((100% - 16px)/2); wird die Spaltenbreite abzüglich 16 Pixel für Ränder durch die Anzahl der Spalten (hier: 2) geteilt. Du könntest das mit einer Media-Query für kleinere Bildschirme ändern:
```
@media screen and (max-width: 666px) {
  .blocks-gallery-grid .blocks-gallery-image, 
  .blocks-gallery-grid .blocks-gallery-item, 
  .wp-block-gallery .blocks-gallery-image, 
  .wp-block-gallery .blocks-gallery-item {
      width: 100%;
      margin: 5px 0;
   }
}
```
Soll das hingegen nur für eine bestimmte Galerien gelte, kannst du der Galerie in den Block-Einstellungen unter „Erweitert“ eine eigene CSS-Klasse „einspaltig“ hinzufügen, die du dann in deiner CSS-Regel verwendest:
```
.blocks-gallery-grid .blocks-gallery-image, 
.blocks-gallery-grid .blocks-gallery-item, 
.wp-block-gallery .blocks-gallery-image, 
.wp-block-gallery .blocks-gallery-item {
    width: calc((100% - 16px)/2);
}
```
Mit calc((100% - 16px)/2); wird die Spaltenbreite abzüglich 16 Pixel für Ränder durch die Anzahl der Spalten (hier: 2) geteilt. Du könntest das mit einer Media-Query für kleinere Bildschirme ändern:
```
@media screen and (max-width: 666px) {
  .einspaltig .blocks-gallery-grid .blocks-gallery-image, 
  .einspaltig .blocks-gallery-grid .blocks-gallery-item, 
  .wp-block-gallery.einspaltig .blocks-gallery-image, 
  .wp-block-gallery.einspaltig .blocks-gallery-item {
      width: 100%;
      margin: 5px 0;
   }
}
```
Die CSS-Regel trägst du im Customizer unter Zusätzliches CSS ein.
Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren, 3 Monaten
@hage Spalten könnten die Lösung sein. Gibt es evtl. noch eine Möglichkeit den Abstand zwischen zwei Bildern bzw. Spalten zu verringern?

@pixolin Danke, werde erstmal die Lösung mit den Spalten weiter ausarbeiten.
- Diese Antwort wurde geändert vor 4 Jahren, 3 Monaten von 7kontinente.
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 3 Monaten
Wenn Du Spalten eingestellt hast, kannst Du – nachdem Du die Bilder eingefügt hast – bei den Bildern rechts in der Spalte unter „Block“ ganz unten unter „Erweitert“ eine CSS- Klasse angeben.
Diese Klasse kann Du unter Design > Customizer > Ind. CSS definieren, z. B. so:
```
.bildabstand {
	margin: 20px;
}
```
oder eben padding.
Oder Du definierst die Klasse in der style.css Deines childthemes.
Weitere Infos wie Du das per CSS gestalten kannst, findest Du z. b. hier
- Diese Antwort wurde geändert vor 4 Jahren, 3 Monaten von Hans-Gerd Gerhards.
Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren, 3 Monaten

Hmm… kriege da nicht hin mit dem CSS. Habe es im Customizer definiert und bei den Bildern wie beschrieben hinzugefügt. Trotzdem ändert sich leider nichts.
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 3 Monaten
Hmm… kriege da nicht hin mit dem CSS.

vielleicht hast Du den Fehler gemacht, dass Du unter „Erweitert“ die Klasse noch mal mit Punkt hingeschrieben hast.
Definiert wird die Klasse wie oben.
Unter „Erweitert“ schreibst Du nur bildabstand
Habe ich hier lokal getestet und funktioniert.
- Diese Antwort wurde geändert vor 4 Jahren, 3 Monaten von Hans-Gerd Gerhards.
Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren, 3 Monaten

Habe das Problem erkannt. Der Abstand ist als 1px definiert, ist aber aufgrund den Spalten immer noch viel zu breit. Wenn ich beispielsweise -20px einstelle, kommen die Bilder näher zueinander, aber dafür sprengt es das ganze Design.

Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren, 3 Monaten

Somit denke ich, dass es eher die Lösung wäre, wenn ich einfach den Abstand zwischen den zwei Spalten (links/rechts) verringern könnte?
Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 3 Monaten
evtl. funktioniert das hier unter Design > Customizer > Ind. CSS:
```
.wp-block-column:not(:first-child) {
    margin-left: 1px;
}
```
Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren, 3 Monaten

Yes! Perfekt! Vielen Dank! 🙂

Moderator Hans-Gerd Gerhards
(@hage)

vor 4 Jahren, 3 Monaten

gerne 🙂 – dann markiere ich das mal als gelöst.
Thread-Starter 7kontinente
(@7kontinente)

vor 4 Jahren
Kann ignoriert werden.
- Diese Antwort wurde geändert vor 4 Jahren von 7kontinente.
- Diese Antwort wurde geändert vor 4 Jahren von 7kontinente.

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)

Das Thema „Bild neben Bild auf Smartphone“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten