• Gelöst wemadewardrobe

    (@wemadewardrobe)


    Hallo Zusammen!

    Ich habe derzeit ein Problem mit einem sehr großen Whitespace auf der Produktseite. Auf bestimmten Browsern (z.B. Edge) und auf Mobilgeräten (getestet auf IPhone und Moto) wird ein riesiger whitespace unter der Produktgallerie angezeigt. Ich habe durch die Entwicklertools im Browser festgestellt dass die Höhe der Product-gallery der Ursprung dieser Lücke ist. Daraufhin habe ich probiert durch CSS im Stylesheet das Problem zu lösen. Konkret habe ich folgende Regeln ausprobiert:

    .woocommerce-product-gallery {
    max-height: fit-content;
    }.

    .woocommerce-product-gallery {
    height: auto;
    }

    .woocommerce-product-gallery {
    height: 600px;
    }

    Allerdings hat keiner dieser Versuche funktioniert und mir ist nicht wirklich ersichtlich warum. Wenn ich die Regeln im Browser einfüge funktionieren sie. Aber sowohl eingefügt unter Customize -> Aditional CSS als auch im Theme file editor haben sie keinerlei auswirkungen.

    Ich nutze das Kadence Theme. Sagt mir gerne bescheid falls ihr noch weitere Informationen von mir braucht.
    Hier ein Beispielprodukt: https://wemadewardrobe.com/en/product/maja-cardigan-knitting-pattern/

    • Dieses Thema wurde geändert vor 3 Tage, 1 Stunde von wemadewardrobe.

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

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Moderator threadi

    (@threadi)

    Ich würde das hier empfehlen:

    .woocommerce div.product div.images.woocommerce-product-gallery {
    height: auto !important;
    }

    Hintergrund: die Höhe ist per Inlinestyle gesetzt (durch irgendein JavaScript der Galerie von deinem Theme beim Laden der Seite). Durch !important überlagert man diese Angabe, obwohl sie sonst vorrang hätte.

    Alternativ dazu könntest du dich auch an den Support des von dir genutzten Themes wenden: https://wordpress.org/support/theme/kadence/

    Das Problem scheint durch die CSS-Anweisung

    .woocommerce-product-gallery {
        max-height: fit-content;
    }

    gelöst worden zu sein. Ich setze den Thread prophylaktisch auf „gelöst“, damit sich weitere Menschen nicht mehr den Kopf über eine mögliche Lösung zerbrechen.

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