AndrewAndrew MitgliedKommentare: 123 Danke erhalten: 1 Mitglied seit: Oktober 2015

Hallo zusammen,

ich bin etwas am verzweifeln.

Wir bekomme ich auf der Versand- und Zahlungsseiten Payment Icons/Bilder nebeneinander? Shopware stellt sie immer untereinander dar (warum auch immer).

Ich arbeite mit der MeinTheme/frontend/_public/src/less/_modules/global.less.

Der Code sieht so aus:

<div class="paymenticonsin">
<img src="domain.de/bild1.jpg">
<img src="domain.de/bild2.jpg">
usw.....
</div>

Und im less file:

div.paymenticonsin {
  display: WERT;
  align-items: left;
  float: left;
}

Egal wie ich display: anpasse, werden die icons dennoch untereinander ausgegeben. Das Einzige, das geholfen hat, war display: inline-flex. Aber dann gehen die icons links und rechts über den custom-page--content content block in der mobilen Ansicht hinaus. Ich habe auch unzählige andere Code-Schnipsel in online CSS-Editoren probiert, aber das möchte einfach nicht werden.

Kann mir jemand bitte einen Tipp geben?

Danke!

1 Antwort

  • simklisimkli MitgliedKommentare: 1014 Danke erhalten: 367 Mitglied seit: Februar 2014
    Hallo Andrew,
    ersetze den Code von oben vollständig durch:
    
    .paymenticonsin img {
    	display: inline;
    }
    Du sprichst den Container an, der die Bilder beinhaltet. Du musst aber die Bilder innerhalb des Containers ansprechen.
    Wenn dich die Abstände zwischen den Bildern stören kannst du noch folgenden Code hinzufügen:
    
    .paymenticonsin {
    	font-size: 0;
    }
    Der erste Code ändert das Verhalten der Bilder. Diese werden danach wie Text behandelt. Mit font-size: 0 im Container werden die Lücken zwischen den Bildern (Leerzeichen) auf 0 gesetzt.
    Viele Grüße
    Zitieren
    Akzeptierte Antwort
    Danke von 1Andrew
  • Akzeptierte Antwort

Antworten

  • AndrewAndrew MitgliedKommentare: 123 Danke erhalten: 1 Mitglied seit: Oktober 2015

    Leider bin ich da noch nicht weitergekommen.

    Hat jemand einen Tipp für mich?

  • simklisimkli MitgliedKommentare: 1014 Danke erhalten: 367 Mitglied seit: Februar 2014
    Hallo Andrew,
    ersetze den Code von oben vollständig durch:
    
    .paymenticonsin img {
    	display: inline;
    }
    Du sprichst den Container an, der die Bilder beinhaltet. Du musst aber die Bilder innerhalb des Containers ansprechen.
    Wenn dich die Abstände zwischen den Bildern stören kannst du noch folgenden Code hinzufügen:
    
    .paymenticonsin {
    	font-size: 0;
    }
    Der erste Code ändert das Verhalten der Bilder. Diese werden danach wie Text behandelt. Mit font-size: 0 im Container werden die Lücken zwischen den Bildern (Leerzeichen) auf 0 gesetzt.
    Viele Grüße
    Zitieren
    Akzeptierte Antwort
    Danke von 1Andrew
  • AndrewAndrew MitgliedKommentare: 123 Danke erhalten: 1 Mitglied seit: Oktober 2015

    Oh Mensch, danke sehr. Jetzt klappts Smile

    Bin da einfach nicht draufgekommen Crying

Anmelden oder Registrieren, um zu kommentieren.