CSS: Items untereinander sortieren?
Hallo zusammen,
ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:
<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>
Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:
@media only screen and (max-width: 400px) {
.social-media-buttons { display: inline-block; }
}
Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?
Danke im Voraus.
LG, Dominik
2 Antworten
Inline heißt fast immer "in einer Zeile", und die ist ja im Normalfall horizontal.
Bei display: Block sollten sie untereinander angeordnet werden, ansonsten könntest du auch z.B.
display: flex;
flex-direction: column;
ausprobieren.
Mehr zu Flexboxen hier:
Mach mal aus deinem: display:inline-block ;
ein: display:block ;