Modul Breadcrumb bei Mobilgeräten nicht anzeigen @media-Regel greift nicht

    In Benutzung ist das Standard-Protostar-Template. Ich glaube nicht, dass meine @media-Regel falsch oder unwirksam ist. Aber vielleicht ist ist die Art und Weise, wie ich diese Regel zur Anwendung bringen möchte falsch?


    Hier mein CSS:

    Code
    /* Breadcrumbs platzsparend auf Mobil (= hohe dpi-Werte) ausblenden */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi){
    .breadcrumb-cl {
            display: none !important!;
    }
}

    Die Klasse "breadcrumb-cl" habe ich (mit Leerzeichen davor) im Modul für die Breadcrumbs unter "erweitert" eingetragen. Dennoch wird breadcrumbs immer noch angezeigt, egal auf welchem Gerät – und auch wenn ich experimentell die "min-resolution" auf absurde Werte setze, um überhaupt eine Wirkung feststellen zu können. In der Firefox-Konsole im HTML-Quelltext ist die Klasse korrekt angezeigt aber nicht unter "Stile".

    Wie muss ich es anstellen, damit die @media-Regel für das Modul breadcrumb wirksam wird?

    Hi Clemens,


    doch, die media Query ist an mehreren Stellen fehlerhaft.

    Kannst du im CSS Validator checken.


    Wieso fügst du dem Modul nicht einfach die Klasse

    hidden-phone

    (Bootstrap 2 Standard) hinzu? Statt breadcrumb-cl.


    Ansonsten einfach mit normalen Viewport Breiten arbeiten.


    @media (max-width: 320px) {

    .breadcrumb-cl {
     display: none;    }

    }


    Wieso du mit Pixel Ratios arbeitest, kann ich nicht nachvollziehen. Es geht dir ja, nehme ich an, um die Viewport Breite, die zur Verfügung steht.

    Das Pixel Verhältnis hat mit der Breite ja erst mal nichts zu tun.


    Gruß


    Pascal

    Herzlichen Dank für deine schnelle Antwort. Meine realtiv aufwendige @media-Kondition hatte ich irgendwo im Web in einem Scriptforum gefunden.

    Die Bootstrap Klasse hidden-phone kannte ich noch gar nicht. Tja hab's gerade probiert und es funzt auf Anhieb und erspart wieder paar Zeilen zusätzliche CSS.


    Allerdings hab ich an ein sich daraus neu ergebendes Problemchen nicht gedacht:

    Zu oberst steht mein Signet, in ca. 10px Abstand darunter die Breadcrumbs und in ca. 10px weiterem Abstand darunter beginnt der erste Inhalt / Beitrag usw.


    Sobald Breadcrumbs weg fällt, fallen auch die Abstände weg, sodass der Inhalt direkt unter dem Signet beginnt.

    Wie bekomme ich den Abstand eingefügt, wenn Breadcrumbs mittels "hidden-phone" nicht angezeigt wird?

    Hi,


    an der Stelle kannst du dem nachfolgenden Element (Klasse oder ID) noch die Angabe über margin geben.

    Code
    @media (max-width: 320px) {
    .breadcrumb-cl {display:none}
    (./#)element{margin:20px 0 0 0} /* oben, rechts, unten, links*/

    /* Alternative*/
    (./#)element{margin-top:20px}
}

    Sorry, aber ich hatte mich doch gerade dazu entschieden, die Breadcrumbs über die Bootstrap-Klasse "hidden-phone" unsichtbar zu machen, wenn Smartphones genutzt werden.


    Die Versuche, rein auf das Pixelmaß screenwidth abzustellen, funktionieren nicht zuverlässig. Würden sie funktionieren, hätte ich im Querformat meiner Test-Website eine zweispaltige Darstellung in den entsprechend gestalteten Test-Beiträgen – wie beim Desktop oder beim Tablet. Statt dessen scheint auch hier das Bootstrap-Grid m it den 12 Spalten und dessen CSS-Definitionen wirksam zu sein, sodass in den Beiträgen nur dann zweispaltig angezeigt wird, wenn ein Desktop oder ein Tablet genutzt wird und nicht ein Smartphone, obwohl die screenwidth beim Smartphone höher sein kann, als beim Desktop.

    Genau deshalb hatte ich ja auch mit pixel-densitiy und den oben zu Beginn beschriebenen @media-Regeln arbeiten wollen. Aber "hidden-phone" ist demgegenüber ja viel einfacher und zuverlässiger!


    Wie kann ich denn den Abstand hinein bekommen, wenn doch das Nicht-Anzeigen der Breadcrumb nun per "hidden-phone" bewirkt wird?

    (Unter dem Signet einen Abstand per margin einfügen, stört massiv, wenn Breadcrumbs angezeigt werden soll.)

    Ich hab's jetzt als Kompromiss so gelöst, dass ich die ID content und die ID aside mit 0.8em Abstand nach oben definiert habe:

    Code
    #content, #aside {
    margin-top: 0.8em;
}

    Dadurch vergrößert sich zwar der Abstand zwischen dem gesamten Content und Breadcrumb. Aber es stört vom Design her nicht und macht von der Logik her sogar Sinn, weil der Content, dessen Beginn der Besucher ja als "Einsprung-Punkt" in die Seite sucht, so leichter auffindbar wird.

    Frage also geklärt / gelöst.


    Vielen Dank für die wertvollen Anregungen!