Navigation überspringen

Dieses Thema ist gelöst. Hier finden Sie eine Beschreibung des Problems und der Lösung.

Problem:
Wenn Sie feststellen, dass auf Tablet- und Mobilgeräten die Sprachen untereinander statt nebeneinander angezeigt werden, liegt das Problem wahrscheinlich an den CSS-Einstellungen Ihres Themes.
Lösung:
Um dieses Problem zu beheben, können Sie die CSS-Eigenschaften für die entsprechenden Listenelemente (

  • ) anpassen, die die Sprachen enthalten. Hier ist ein Beispiel, wie Sie die Listenelemente so anpassen können, dass sie nebeneinander angezeigt werden:
    #menu-3d0ccea li {
        display: inline-block; /* Damit werden sie in einer Linie angezeigt */
        margin-right: 10px; /* Optional: Fügt etwas Abstand zwischen den Elementen hinzu */
    }

    Stellen Sie sicher, dass Sie diese Änderungen innerhalb des entsprechenden Media Query vornehmen, damit sie nur auf Tablet- und Mobilgeräten angewendet werden. Beachten Sie auch, dass das Styling von Ihrem Theme, in diesem Fall JupiterX, beeinflusst wird.
    Wenn Sie weitere Unterstützung benötigen, können Sie einen zertifizierten WPML-Dienstleister beauftragen. Eine Liste finden Sie hier: https://wpml.org/contractors/
    Bitte beachten Sie, dass die ID (#menu-3d0ccea) vom Theme kommt und die Darstellung je nach Endgerät und Browser variieren kann. Einige Geräte zeigen die Sprachen aufgrund von Platzbeschränkungen durch das Logo in der Mitte untereinander an. Eine Anpassung des margin-right kann hier Abhilfe schaffen.

    Es ist möglich, dass diese Lösung für Sie nicht relevant ist, entweder weil sie veraltet ist oder nicht auf Ihr Problem zutrifft. In diesem Fall empfehlen wir Ihnen, die bekannten Probleme zu überprüfen, die Version der dauerhaften Lösung zu verifizieren und zu bestätigen, dass Sie die neuesten Versionen von Themes und Plugins installiert haben. Sollten Sie weiterhin Hilfe benötigen, zögern Sie nicht, ein neues Support-Ticket zu öffnen: WPML-Supportforum.

  • Dies ist das technische Support-Forum für WPML – das mehrsprachige WordPress-Plugin.

    Mitlesen können alle, doch nur WPML-Kunden können hier Fragen veröffentlichen. Das WPML-Team antwortet im Forum an 6 Tagen pro Woche, 22 Stunden am Tag.

    Heute stehen keine Supporter zur Arbeit im German-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

    Schlagwörter: 

    Dieses Thema enthält 3 Antworten, hat 2 Stimmen.

    Zuletzt aktualisiert von Marcel Vor 7 Monaten, 3 Wochen.

    Assistiert von: Lucas Vidal de Andrade.

    Verfasser Beiträge
    März 27, 2024 unter 1:57 pm #15456127

    hannesF

    Hallo,
    Bei Tablet und Mobile werden die Sprachen untereinander und nicht nebeneinander dargestellt. Kann ich das mit CSS beeinflussen?

    Gruß
    Hannes

    Bildschirmfoto 2024-03-27 um 14.56.41.png
    März 27, 2024 unter 2:41 pm #15456327

    Marcel
    Supporter

    Sprachen: Englisch (English ) Deutsch (Deutsch )

    Zeitzone: Europe/Madrid (GMT+01:00)

    Hallo Hannes,

    dies ist möglich. Es wird ein "li" gesetzt, also eine Liste. In dem Fall müssen Sie die darüberliegende ID (#menu-3d0ccea) mit Display: inline-block anpassen.

    Anbei ein Beispiel:

    #menu-3d0ccea li {
        display: inline-block; /* This will place them on the same line */
        margin-right: 10px; /* Optional: Adds some space between the items */
    }
    

    Mit dem margin-right kann dann der Abstand dazwischen angepasst werden. Sie müssen dies jedoch im jeweiligen Media Query setzen, ansonsten wird es für alle Display Größen gesetzt. Das Styling selbst kommt hier von JupiterX.

    Wenn Sie hierbei weitere Unterstützung benötigen, empfehle ich Ihnen einen zertifizierten WPML Dienstleister dafür zu beauftragen. Sie finden diese hier: https://wpml.org/contractors/

    Viele Grüße
    Marcel

    März 27, 2024 unter 3:14 pm #15456699

    hannesF

    hallo marcel,

    danke für die hilfe.
    bei tablet funktioniert es, jedoch interessanterweise nicht bei mobile.
    ich habe sogar im quellcode entdeckt, dass dort das menü eine andere ID hat und es so gesetzt:

    #menu-c2487f1 li {
    display: inline-block;
    }

    keine ahnung wieso das hier nicht geht?
    d.h. in der browservorschau ist es richtig, aber nicht auf meinen echten smartphone.

    gruß
    hannes

    März 27, 2024 unter 4:18 pm #15457170

    Marcel
    Supporter

    Sprachen: Englisch (English ) Deutsch (Deutsch )

    Zeitzone: Europe/Madrid (GMT+01:00)

    Hallo Hannes,

    ja, die ID kommt vom Theme. In der Browser-Ansicht funktioniert es im Chrome je nach Endgerät.

    - Ein Galaxy S8+/iPhone 12 Pro zeigt es untereinander
    - Ein S20 Ultra/Pixel 7 nebeneinander.

    Der Grund ist, dass nach rechts kein Platz ist, wegen des Logos in der Mitte. Mit einem margin-right: 1px würde es z.B.: auch auf den genannten Endgeräten korrekt dargestellt werden.

    Viele Grüße
    Marcel

    März 28, 2024 unter 7:12 am #15458854

    hannesF

    danke für deine wertvolle hilfe!