Social Media Buttons in mobiler Version nebeneinander statt untereinander

02.06.2021 12:41

richfox-consulting
#1

ri

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.

1
2
3
4
5
 
#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

Antworten

Beitrag melden

#2

04.06.2021 15:53 (zuletzt bearbeitet: 04.06.2021 15:55)

az_
#2

az_

Um die Dinger nebeneinander zu setzen, kannst du float: left; benutzen. Oder mit Flex Box arbeiten.
LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

09.06.2021 09:09

richfox-consulting
#3

ri

richfox-consulting

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)

1
2
3
4
5
6
7
8
9
10
11
 
    #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|

Antworten

Beitrag melden

#4

11.06.2021 09:58 (zuletzt bearbeitet: 11.06.2021 10:37)

az_
#4

az_

Das ist ja auch nicht ganz richtig so - aber auch nicht komplett falsch. Den richtigen Container hast Du schon!

... folgende Überlegung vorab:

1.) welche Elemente möchtest Du nebeneinander darstellen? Antwort: die Spalten im Container (.cc-m-hgrid-column) - Die musst Du mit float:left versehen, nicht den Container. Der kann bleiben, wie er ist.
2.) wie breit dürfen die Spalten sein? Antwort: width: calc(100% / Anzahl ) !important; (important ist hier wichtig)
...und die Mindestbreite muss aufgehoben werden (Jimdo Standard für mobil: min-width: 0% statt 100%).

3.) Und zum Schluss noch die Einschränkung

Da Du nicht alle Spalten so formatieren willst, musst Du auch den übergeordneten Container bezeichnen (#cc-m-11979645497) und außerdem soll das Ganze nur in der mobilen Ansicht wirken, also @media (max-width:767px) {}

So kommst Du zu folgendem Code:

1
2
3
4
5
6
7
8
9
10
11
 

 
    @media (max-width:767px) {
            #cc-m-11979645497 .cc-m-hgrid-column {
                min-width: 0;
                width: calc(100% / 6) !important;
                float:left;
            }
    }
 

 

Ich hoffe, das gut erklärt zu haben,
LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html