Social Media Icons auf Handy nicht richtig angezeigt. Verzweifle :(

    Hallo Forum,
    Ich habe letztens zwei Social Media Icons in ein Projekt eingefügt. Diese sind auf dem Desktop perfekt responsive, jedoch auf kleineren Bildschirmen nicht wirklich. Sie sollen rechts unten neben die Buttons aber egal was ich versuche, sie setzen sich oben drüber. Jemand eine Idee?
    Das ist der CSS Code: (Noch ein paar Testcommands drin)

    #socialmedia{
    position: absolute;
    z-index: 9999;
    bottom: 65px;
    width: auto !important;
    margin: auto;
    display: flex;
    text-align: right;
    right: 100px;
    }



    @media only screen and
    (min-device-width:768px) and
    (max-device-width:1024px) {
    #socialmedia{
    max-width: 100%;

    width: auto;
    z-index: 9999;
    bottom: 40px;
    }
    }


    @media only screen and
    (min-device-width:320px) and
    (max-device-width:480px) {
    #socialmedia{

    position: absolute;
    max-width: 100%;
    height: auto;
    width: auto;
    align-text: right;
    align-text: bottom;
    float: right;
    z-index: 99;



    }
    }

    jetzt wo man weis wie die icons aussehen ,sieht man sie auch im Bild.
    Also bei mir sieht es bis zu einer viewpoint breite von 500 pixel ganz gut aus. Darunter verschieben sich die Icons unter den prev ,next buttons.

    Verstehe aber deine html anordnung nicht. Es wäre bestimmt einfacher die social buttons mit in den Container rein zutun wo auch die prev und next buttons sind .

    Auf der schnelle kann ich das jetzt nicht testen , aber in der richtung solltest du es mal versuchen

    Genau das ist ja mein Problem.. es ist auf allen Browsern anders gerendert. Ich versuche es mal in die Richtung von Basti.. danke schonmal

    Danke für den Tipp Cipha. Leider ging es damit bei mir immernoch nicht wirklich.. die Icons wurden (zumindest auf Safari) zu hoch angezeigt. Ist jedoch ein guter Ansatz.. noch eine Idee?:idea::D