Mit append angehängtes Objekt nur bis zu einer gewissen Screengröße anzeigen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Mit append angehängtes Objekt nur bis zu einer gewissen Screengröße anzeigen

    Einen schönen guten Abend in die Runde.

    Ich baue gerade eine alte Seite auf responsive um. Im Header ist mit folgendem Code ein Bild angehängt.


    Quellcode

    1. $(document).ready(function() {
    2. $('<a href="http://www.klute-webdesign.de" target="blank"><img src="http://www.meineseite.de/meinbild.png" style="margin-left:930px;margin-top: 30px; "/></a> ').appendTo('#imHeader');
    3. });
    Beim Umsetzen auf responsiv passiert folgendes. Tippt man auf den Hambuger Button, wird das Menü um 930 px nach rechts verschoben angezeigt. In der Vorschau ist alles ok. Hat jemand eine Idee? Kann man den append bis zu einer gewissen Screengröße bedingen? So, das dieser unter 1000px breite nicht mehr angzeigt wird?
    Es geht um diese Seite.
    LG
    Labelle

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Labelle ()

  • Hi Labelle !

    Ich kann es derzeit nicht testen, aber die etwas umständlichere Methode wäre den margin bei den Breakpoints zu überschreiben.

    Für den ersten Breakpoint wäre der Code...

    CSS-Quellcode

    1. <style>
    2. @media (max-width: 999px) {
    3. #imHeader img {
    4. margin-left: 415px;
    5. margin-top: 8px;
    6. }
    7. }
    8. </style>

    Für die weiteren musst du die Pixelzahl ändern.
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !
  • Hi Andy,

    so kompliziert brauch ich es gar nicht. Oder liegt gar ein Mißverständnis vor?

    Ich brauch das angehängte Bild NUR bei der Desktop-Version, kann man es bei einer kleinen Ansicht ausblenden, mit display none oder so?

    Ich kann das Siegel natürlich auch kplt in den Header packen, dann löst sich das Problem von allein, wäre aber schade, soll eigentlich bei Vollgröße über den Rand versetzt sein.
    LG
    Labelle
  • Natürlich kannst du es auch ausblenden mit "display: none;" ! Das Problem ist aber, dass du es verlinkt hast und im Header ist es zwar sichtbar aber nicht anklickbar ! Deshalb habe ich den Code geschrieben.
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !
  • Du kannst aber das Bild mit dem HTML-Objekt drinnen lassen und (HTML-OBjekt so groß wie die GRafik machen) und dann beim ersten Breakpoint CSS Code einfügen z.B. #imHeader div {display:block!important;}
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !