App Store Badge wird nicht angezeigt

[Rolf B]

Hallo Mr.Circul,

zunächst mal: Ich habe jetzt einen Blick auf deine Homepage geworfen. Das Apple Store Badge sieht deutlich besser aus, wenn man am <img> Element width="1" height="1" weglässt. Die kommen aber nicht von Dir, sondern von Wordpress und - mutmaßlich - dem Schalter data-recalc-dims. Denn wegen lazyload ist das Bild erstmal nur eine data-URL, die aus einem 1x1 GIF besteht, und erst, wenn man nach unten rollt, wird das echte Bild geladen. Aber dann werden die Dimensionen nicht neu berechnet.

Beim Google-Bild hast Du width="115 px" height="50 px" angegeben. Das ist zwar auch nicht ganz richtig, weil die px Angabe nicht in HTML Attribute gehört, aber das scheint Wordpress zu fixen. Im DOM steht width="115" height="115" - was auch wieder Unsinn ist, height sollte 50 sein, aber das wird vom Wordpress CSS gerettet, da steht height:auto.

Beim Apple-Bild fehlen die width/height Angaben in der HTML Quelle.

Vorschlag: Setze für Google- und Apple Bild width="115", und keine height. Die ist wegen height:auto im CSS nicht nötig.

Und wie setzt man sie untereinander? Das wirst Du wohl mit Mitteln von Wordpress oder Divi machen müssen, und das kennst Du besser als ich. Ich weiß nicht, ob Du an der Stelle stumpfes HTML einsetzt oder Wordpress-Features nutzt. Mit nackigem HTML wäre wohl ein einfacher <br><br> die simpelste Lösung. Wie einfach es ist, mit den eigentlich angemessenen Techniken (Margins, Liste) zu arbeiten, weiß ich nicht.

Die "richtige" Art wäre eine Liste, deren list-style und deren margin/padding auf none gesetzt ist. In die List-Items setzt Du die Links. Und mit margin oder padding auf den List-Items legst Du die Abstände fest.

Ich finde es übrigens unsinnig, an dieser Stelle mit lazyload zu arbeiten. Du hast riesige Bilder drin, die Seite lädt beim Start 4.5MB, da sind die beiden Shop-Links komplett wurscht. Einfach das Bild mit dem finalen src-Attribut einsetzen (im Inhalt ist im data-src Attribut zu finden), lazyload Klasse weg, <noscript> Block weg. Fertig. Du könntest auch die beiden Bilder in data-URLs umwandeln u

Rolf