Plugin für Browseranpassung

  • Hallo!

    Wenn ich meine Seite, http://askoefroschberg.bplaced.net/wordpress/, über meinen Laptop aufrufe, stehen die Buttons auf der rechten Seite einwandfrei auf dem Verlauf der Sidebar. Leider sieht die Navigation z. B. auf einem Mac-Browser oder auch auf dem Handy nicht so aus. Entweder ist der Verlauf kokmplett weg oder der Verlauf ist "verkürzt" in der Breite und die Navigation steht darüber hinaus. Anbei ein Bild, damit man sich darunter etwas vorstellen kann. Das Template, das ich verwendet habe, ist ein Responsive Design. Somit habe ich mich gedacht, dass es auf allen Endgeräten richtig angezeigt wird. Kann mir jemand weiterhelfen? Vielleicht gibt es ein Plugin, dass dieses Problem lösen kann.

    Danke und liebe Grüße
    Christina

    • 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

  • du hast in der style.css des Child Themes

    HTML
    .right-sidebar {
         float: right;
         margin: 0px 30px 0px 0px
         width: 300px;
    }


    stehen, das ändere so ab:

    HTML
    @media screen and (min-width: 768px) {
    
    
    .right-sidebar {
         float: right;
         margin: 0  auto;
         width: 300px;
    }
    }

    und schönen Gruß an den Froschberg, seh ihn täglich vor mir :-)

    schreibst du wo 0 hin brauchst keine Angabe wie px oder % oder em, 0 ist einfach Null

  • Ich hab das nun ausprobiert, jedoch hab ich leider noch immer nicht das gewünschte Ergebnis. Jetzt steht die Navi auf der rechten Seite drüber und bei Tablet und Handy hab ich keinen Verlauf? Gibts noch eine andere Lösung?

  • ja dann ist der Inhalt vermutlich zu breit

    außerdem nutzt ihr in der Sidebar Bilder für die Navi das ist bei all den Bildschirmgrößen nicht ganz so gut :-)

    evntuell hilft da

    img{height:auto;width:auto;max-width:100%}

    das fand ich zumindest nirgendwo im Theme

    das OriginalTheme hat diese Probleme nicht

    und was meinst du mit "Verlauf"

    und zur INFO, da kann es kein Plugin geben, weil das vom CSS des OriginalThemes abhängt und vom HTML

    probiere den Inhalt eben kleiner zu machen

  • Das Layout funktioniert so nicht ohne Weiteres. Natürlich musst Du auch die media queries anpassen und das wird auf diesem Weg alles andere als lustig.

    Anstatt dieser - gelinde gesagt - hässlichen und unpraktischen Navigationsgrafiken sollten sie als normale Textlinks mit CSS ausgegeben werden. Grafiken werden auch nicht mehr mit Breiten- und Höhenangaben versehen (HTML), das sollte über CSS stattfinden. Dann klappt das auch mit Responsive.

    Überdenke das Layout, dann löst sich das Problem von selber. ;)

  • @Brawler: Na das ist ja mal eine Ansage! Werde das dem Kunden weitergeben, dass du sein Layout als hässlich empfindest. Hässlich ist zwar für mich was anderes, aber Geschmäcker sind ja bekanntlich verschieden. Da hab ich in meiner Grafikerlaufbahn schon ganz andere Designs gesehen. Trotzdem danke für die Antwort. Dann muss ich weiter suchen, damit ich das Problem lösen kann.

  • Da hab ich in meiner Grafikerlaufbahn...

    Nichts für ungut, aber damit disqualifizierst Du Dich grade selber. :D

    Werde das dem Kunden weitergeben, dass du sein Layout als hässlich empfindest.

    Echt? Hat Dein Kunde das Layout erstellt? :mrgreen: "Kompetenz in Tüten..."

    1. Die Grafiken haben eine Größenangabe im HTML-Quelltext, was in Bezug auf Responsive falsch ist.
    2. Die Grafiken werden nicht in ihrer nativen Auflösung angezeigt (sondern vergrößert).
    3. Man verwendet keine grafischen Buttons mehr für Links, sondern setzt sie per CSS um.

    Der eigentliche Text des Navigationspunktes könnte bspw. prima in einem LI-Element stehen, das einen weißen Hintergrund und einen roten Rahmen hat. Dem LI vorangestellt (wahlweise als Hintergrund) kann man das ASKÖ-Logo einfügen (persönlich würde ich nur die Bildmarke empfehlen, das ist sonst too much). Auf diesem Weg spart man nicht nur Platz, sondern hat deutliche mehr Flexibiliät was das Responsive Design betrifft (Breite, Größe).

    Davon unabhängig landet die Primärnavigation auf kleinen Displays unter dem Content, was leider ein Fail ist. Eine mobile Navigation ist also zusätzlich erforderlich.

  • Nichts für ungut, aber damit disqualifizierst Du Dich grade selber.:D


    Wenn du meinst!

    Außerdem ist das nur mal eine Probe, die ich nach dem vorgelegten Design umgesetzt habe, falls das noch nicht aufgefallen ist. Deshalb sind die Buttons jetzt einfach mal wahllos vergrößert, um es der Vorgabe anzupassen.

    Einmal editiert, zuletzt von ChristinaK (2. Oktober 2015 um 17:22)

  • Du kannst deine Meinung gerne äußern, jedoch finde ich die Aussage total unpassend. Was haben meine Qualitäten als Grafikerin mit dem Schrott zu tun, der mir in den letzten Jahren untergekommen ist?

    Aber das spricht bestimmt ein Spitzendesigner!

    wenn die Links weiterhin als Grafiken dastehen kann es mit responsive zwar vordergründig was werden,
    wenn man sich einen CSS Könner /CSS Könnerin holt
    aber nur vordergründig => weil sie in irgendeiner Auflösung => also bei irgendeinem Grät unlesbar werden.

    sie sind ja jetzt schon arg verpixelt => speicher sie 100% mit jpeg ab und lass sie mit jpegmini.com komprimieren,

    so arg ver"jpegt" lädt man einfach keine Grafik mehr hoch.


    Und es tut mir für den ASKÖ Froschberg leid, dass er sich nicht mal einen anständigen Hoster mit anständiger Domain leisten kann oder mag.
    Für das Logo des ASKÖ kannst du gar nichts, das sieht einfach so aus.

    Nachdem der Froschberg in Linz ja keine Billigstwohngegend ist dachte ich, die hätten Geld für ihre Website, um sich auch einen Profi für das WWW zu leisten. Und nein ich bewirb mich damit nicht für den Job :-).

Jetzt mitmachen!

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