Hallo Liebe Mitglieder,

Ich habe meine Seite richfox-consulting.de gerade ein wenig umgestaltet und möchte nun die Social Media Buttons in der Sidebar am Ende jeder Seite haben. Die Buttons habe ich mit folgendem Code auch schon kleiner bekommen und mittig zentriert.

#cc-m-11979645497 {
    max-width: 300px !important;
    text-align: center;
    margin: 0 auto;
}
 

Das Problem ist nun aber das die Icons auf dem Smartphone untereinander dargestellt werden. Mit Media Querys arbeiten bringt leider nichts, da der passende Code fehlt. Obwohl ich die max-width des Divs auf 300 Pixel festgelegt habe, sehe ich im DevTool einen orangenen Rand (Margin) mit 1300 Pixel breite (gesamte Seitenbreite). Wenn ich das Element untersuche zeigt er mir aber die 300 Pixel an. Das Margin: 0 auto zentriert es zwar in der Desktop Ansicht.

Nach stundenlangem versuchen finde ich keine Lösung, daher hoffe ich ihr könnt mir weiterhelfen.

Liebe Grüße
Dominik

Leider funktioniert das nicht richtig. Die Icons werden mit float left zwar an den linken Rand gesetzt, aber weiterhin untereinander angezeigt und rutschen damit sogar in den Footer. (Siehe Bild im Anhang)

    #cc-m-11979645497 {
        max-width: 300px !important;
        text-align: center;
        margin: 0 auto;
    }
 
@media(max-width: 768px) {
    #cc-m-11979645497 {
        float: left;
    }
}
 

|addpics|x1r-1-ed8a.png|/addpics|

Nicht nur die Erklärung war super gut, sondern was noch wichtiger ist - Der Code funktioniert!

Vielen Dank für die super Unterstützung.