Problem mit seitlicher Buttonleiste im responsive Design

[Rolf B]

Hallo Zeppelin,

Vorweg: wenn ich deinen Code in ein Fiddle kopiere fehlen die Images. Hast Du eine Testversion irgendwo online?

Zum aktuellen Problem: Nimm dem #socialfloat die eigene Breite und Höhe weg, dann passt er sich an die Icons an und es hängt nichts drüber hinaus.

Verschönerungsideen:

• Die Icongröße in width und height an der gleichen Viewportrichtung orientieren, entweder beides vh oder beides vw, dann sind sie definitiv quadratisch.
• Dem ul ein margin:0; padding: 0; geben und den li padding: 0.8vh;. Das macht den Rand gleichmäßig.
• Dem ul noch ein overflow:hidden verpassen, dann können die Icons nicht in Grenzfällen in die Abrundung hineingucken.
• Text in die Links setzen, für Leute die ihren Augen nicht nutzen können. Für "Normalleser" musst Du den natürlich gleich wieder verstecken. Siehe Beispiel unten.

Und du könntest dein CSS etwas aufräumen.

• vertical-align greift in deinem Kontext eh nicht, das richtet inline-Elemente untereinander aus. Deine Bilder sind Hintergrundgrafiken und die zentrierst Du mit background-position bereits. Also: vertical-align kann weg.
• Die meisten Eigenschaften deiner Bilder-DIV sind gleich, zieh sie in eine eigene Regel heraus. Nur das Bild ist individuell
• Auf das eingebettete div kannst Du verzichten; du kannst die id Attribute auch den Links geben und aus dem a Element im CSS mit display:block ein Block-Element machen. Dann verhält es sich wie ein div.
• Und, äh, ja, die Liste ist eigentlich hinreichend, ein Rahmendiv brauchst Du nicht - es sei denn, das div hat bei Dir noch weiteren Inhalt. Dann möchte es aber lieber ein aside Element sein.

Der folgende Markup kann reichen, und ich würde die id nicht socialfloat nennen sondern sociallinks, weil das Ding nicht floatet (sondern fixed ist) und weil es die Links enthält. Beachte meine Texte in den Links, die für einen Screenreader sichtbar sind, und die ich im CSS mit font-size:0 für den Normalleser verstecke (die min-width/min-height Angaben sind deshalb in rem statt em).

<ul id="sociallinks">
   <li><a href="https://" id="facebook">Facebook</a></li>
   <li><a href="https://" id="insta">Instagram</a></li>
   <li><a href="https://" id="twitter">Twitter</a></li>
</ul>

Im CSS sieht's dann so aus:

#sociallinks { 
   position: fixed;
   margin:0; padding: 0;
   color: #ffffff; background-color: #000000;
   border-bottom-right-radius: 0.8vw;
   border-top-right-radius: 0.8vw;
   overflow:hidden;
   top: 40vh; left: 0; 
}

/* Listenpunkte werden bei padding:0 im ul nicht angezeigt, aber sicher ist sicher */
#sociallinks li { list-style-type: none; }

#sociallinks a {
   display:block; 
   margin: 0.8vh; font-size: 0;
   width: 2vw; height: 2vw; min-width: 1.5rem; min-height: 1.5rem;
   background-repeat: no-repeat; background-position: center; background-size: contain;
}

#facebook { background-image: url(img/facebook.png); }
#twitter { background-image: url(img/twitter.png); }
#insta { background-image: url(img/insta.png); }

Rolf