Banner/Widgets auf Mobiler Ansicht deaktivieren

  • Hallo liebe Forengemeinschaft,

    mich belastet schon wochenenlang ein kleines Problem & ich nehme an bei euch an der richtigen Stelle zu sein.

    Ich nutzt das Thema HashOne und habe als Test einen Banner/Widget von Amazon in die Seite eingebunden mit einer Größe von: width="728" height="90"

    Mit dem Plugin Yellow Pencil habe ich die Möglichkeit Codes für das Design einzugeben bzw. auch über die Themeneditoren.
    Viele schreiben immer von Display: none - jedoch weiß ich nicht recht wo ich den code eingeben muss bzw. wie ich diesen genau einfügen muss damit Display none nur ausschließlich bei der Ansicht von Mobile-Geräten aktiviert wird.

    Bisher ist es mir lediglich gelunden ,,Display none" für Desktop sowie Mobile zu aktivieren oder deaktivieren.

    Ich muss den Banner auf jeden Fall ausblenden da auf der mobilen Ansicht aufgrund der Länge von der Anzeige das komplette Layout nicht mehr festsitzt.

    Kann mir bitte jemand helfen ?

    Vielen lieben Dank vorab und liebe Grüße

    Sandro

    • 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

  • Schau dir dazu auch mal die css media queries min-width / max-width an.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Schau dir dazu auch mal die css media queries min-width / max-width an.

    Vielen Dank für deinen Hinweis.

    Ich bräuchte einen Tipp wie ich zum beispiel das max-width für ein Obejkt speziell nur für Mobile hinterlegen kann - vorallem wo ?!

  • was meinst du genau? Du musst die max-width angeben, bis wohin ausgeblendet werden soll:

    Code
    @media all and (max-width:700px){
      .xxxx{display:none;}
    }

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Ich meine wie ich der Css Datei sage - das der Befehl lediglich bei mobiler Ansicht greift.
    Wenn ich in die Style.CSS den Code beginne mit Media all ec. greift es dann nur für Mobile oder auch Desktop ?

    Ich möchte praktisch der CSS sagen - sie soll alle Banner die größer als ,, width 360px " sind ausblenden mit display none bei ausschließlich mobiler Ansicht.

    LG Sandro

  • kennst du einen Desktop PC mit einer Display Breite kleiner 700px? Daraus ergibt sich doch die logische Antwort, Werte kannst du ja auch auf deine Bedürfnisse ändern.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • Ich muss den Banner auf jeden Fall ausblenden da auf der mobilen Ansicht aufgrund der Länge von der Anzeige das komplette Layout nicht mehr festsitzt.

    Ich weiß zwar nicht, was du damit genau beschreiben willst. Aber wenn es dir das Layout verschiebt / zerhagelt, wenn der Bildschirm zu klein ist, ist das doch ein Argument dafür, das Element abhängig von der Bildschirmgröße nicht zu zeigen. (Unabhängig ob mobil oder Desktop)

    Ich meine wie ich der Css Datei sage - das der Befehl lediglich bei mobiler Ansicht greift.
    Wenn ich in die Style.CSS den Code beginne mit Media all ec. greift es dann nur für Mobile oder auch Desktop ?

    Ich möchte praktisch der CSS sagen - sie soll alle Banner die größer als ,, width 360px " sind ausblenden mit display none bei ausschließlich mobiler Ansicht.

    Dafür gibt es schon eine Möglichkeit. Unter Umständen auch sinnvoll, das muss man immer im jeweiligen Fall entscheiden.

    Das geht aber nicht mit dem gelben Bleistift, sondern mit einem Child-Theme und entsprechendem Eintrag in den betroffenen Template-Dateien. Und zwar über die Abfrage wp_is_mobile() Damit kannst du entweder eine eigene Klasse wie „mobile“ zuweisen oder (dann über die functions.php) deine Body-Class erweitern oder auch festlegen, dass das Banner für Mobilgeräte gleich gar nicht geladen wird. Das betrifft dann aber auch Tablets.

    Gruß
    helix

  • Wirklich sehr nett das ich hier so tolle hilfe bekomme.

    Ich teste gerade diverse Möglichkeiten.
    Ich stehe noch am Anfang zu verstehen wie ich diverse Klammern ec. setze.

    Wie muss der Code in der funktons.php lauten ?

    in etwa:
    if (wp_is_mobile()) {iframe{display:none}} ?

    Ich bekomme ständig fehlermeldungen.
    Ist es egal an welcher Stelle ich den Code einsetze in der Datei oder muss man auf die Zeilen genau achten ?

    LG Sandro

  • Zuerst musst du entscheiden: Willst du die Body-Class erweitern? Oder reicht es, nur an der Stelle, wo das Banner eingebunden ist, eine entsprechende Klasse (und damit Möglichkeit, über CSS anzusprechen) einzubauen.
    Das mit der Body-Class ist sinnvoll, wenn du die Unterscheidung mobil-oder-desktop auch noch für weitere Dinge brauchst.
    Direkt an der Stelle, wo das Banner eingebunden ist, ist sinnvoll, wenn du vielleicht das Banner für mobil gleich gar nicht ausgeben willst – weil: du brauchst ja auch die mobilen Geräte nicht laden lassen, was nachher gar nicht angezeigt wird (das passiert aber, wenn man nur übers CSS geht mit display: none)

    Body-Class erweitern: Such mal genau danach. Auf deutsch. Oder auf englisch „custom body class“, sinnigerweise immer mit wp mit in der Suchphrase. Und zumindest, wenn du auf englisch suchst, kannst du ohne weiteres auch gleich das is_mobile mit in die Suchphrase aufnehmen, da wirst du – englischsprachig – auch Anleitungen genau dafür finden.
    Das ist eine Ergänzung in deiner functions.php

    Direkt an der Stelle, wo das Banner eingebunden ist: Entsprechende Template-Datei schnappen, bearbeiten, unter gleichem Namen in den Ordner des Child-Themes legen. Hierfür musst du die functions.php nicht verändern, nur die entsprechende Template-Datei.
    Die Bearbeitung ist eine schlichte if-Abfrage oder ein if-else-Konstrukt.

    Wenn es mobile ist, gib dem Element, in dem dein Banner ist, die Klasse mobile.
    Oder: wenn es mobile ist, gib nichts aus, ansonsten (else) gib das Element mit dem Banner aus.
    Oder: wenn es mobile ist, gib die Mobilversion aus, ansonsten …

    Auch dazu verrät dir die Suchmaschine genügend Anleitungen und Codeschnipsel. (Du musst dich da sowieso selber reinfitzen mit dem Child-Theme und so; wenn dann wirklich noch Unklarheiten bleiben: klar, frag nach, dazu ist das Forum da.)

    Gruß
    helix

Jetzt mitmachen!

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