Darstellung auf Laptop und PC unterschiedlich

    Hallo
    Ich habe ein Problem mit Aussehen einer Webseite, die ich grade aufbaue.
    Folgendes wen ich mir diese auf dem Laptop ansehe, ist alles so wie es seien soll, aber wen ich mir die Seite auf dem PC anschaue nicht. Aufgefallen ist mir das vor allem bei einer Erstelten Gruppe im Buddypress Bereich.
    Auf dem Laptop ist dort noch alles OK, da wird der Admin Avatar schön neben der Gruppenbeschreibung angezeigt. Auf dem PC dagegen wird dieser nach unten gesetzt, wen ich aber den Zoom im Chrom Browser auf 80 % setze, wird es wider so angezeigt, wie es seien sollte.
    Eigentlich sollte doch auch wen die Bildauflösung auf dem PC geringer ist wie auf dem Laptop vernünftig angezeigt werden oder sehe ich das falsch?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Ohne Link zur Seite zur Seite ist das kaum zu beantworten.
    Könnte vielleicht daran liegen, dass das Avatar mit einer festen Größe (height , width) eingefügt ist und das Elternelement (weil zB mit % dimensioniert) sich an die Displaygröße anpasst (?).

    Könntest du dein Problem bitte etwas näher beschreiben? Von welchem Avatar und welcher Gruppenbeschreibung redest du?
    Am besten mal den betroffenen Bereich (richtig/fehlerhaft) als Screenshot mit entsprechenden Markierungen einstellen.

    Teste mal bitte folgendes im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    HTML
    #buddypress #item-header-cover-image {
  display: flex;
}

    Zumindest versuchen kann man es...

    HTML
    #groups-list li {
  display: flex;
}
.widget.buddypress div.item-meta {
  margin-left: 0px;
}


    Ob das dann so funktioniert, wie du es dir vorstellst und ob es nicht an anderer Stelle 'negative' Effekte hat, musst du ausprobieren.

    So habe das jetzt mal genau angeschaut. Durch dein erstes css Code schnipsel sitzt der Avatar im Gruppen-Bereich jetzt richtig, aber dafür sind im Profil-Bereich (nicht das eigene) die Butten / Freund hinzufügen / Follow / Öffentliche Nachricht / Private Nachricht so wie der Name nach oben gerutscht

    Code
    #buddypress #item-header-cover-image {
  display: flex;
}

    Auch wenn ich nicht das Gleiche sehe wie du... da ich (wahrscheinlich) die testuser-Seite sehe, denke ich, dass das Problem an den unterschiedlichen Container ID's/Klassen innerhalb des Elternelements liegt, dass mit 'display: flex;' formatiert ist.
    Auf Seite A... die mit dem Avatar und der Bezeichnung 'Admin' sieht es so aus:

    HTML
    body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
    clear: none;
    margin-top: 225px;
    margin-left: 0;
    max-width: 50%;
}


    .. hier die ID #item-actions mit einem margin-top von 225px

    Auf Seite B... die mit dem TestuserProfil aber so..

    HTML
    #buddypress div#item-header #item-header-cover-image #item-header-content {
    clear: both;
    float: left;
    margin-left: 170px;
    margin-top: -140px;
    width: auto;
}


    .. also andere ID (#item-header-content) und ein negativer margin-top von -140px!
    Für diesen Container müsstest du das margin-top auf einen positiven Wert setzen, so dass es wieder passt.

    jo hat habe den zweiten wert margin-left auf 100px und den margin-top auf 180px

    War schon am überlegen ob ich mir ein anderes Themes suche wehre aber schwierig da es kaum vernümftige free Buddypress kompatible Themes gibt und ich fand dieses ganz gut wegen der Aufteilung der Widget-Bereiche.

    Ich kenne Buddypress nicht und kann deswegen auch nicht sagen, ob das nun gut oder schlecht ist... oder wie gut oder schlecht es mit WP Themes kompatibel ist, was mir aber auffällt (das gilt allerdings auch für viele andere Plugins bei WP), dass der produzierte Code und das zugehörige CSS oft grottig ist. Scheint so, als würde dort die Entwickler jeder sein eigenes Süppchen kochen und noch ein Stylesheet hinzufügen und am besten noch ein paar JavaScripte mit dazu... und am Ende kommen dann die Probleme, weil es nicht wirklich aus einem Guss ist, sondern aus vielen Teilen zusammengepuzzelt wird. ... na ja... ist nun mal so.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden