Divs innerhalb der Spannweite kollabieren weiter - html, css, flexbox, alignment

Hier ist der Link zu der Webseite, die ich erstelle:

https://aa21fdc571424e82b426191b66978480.codepen.website

Das Problem, das ich nicht lösen kann, hat mit den drei Errungenschaften zu tun, die unterhalb des Absatzes des Textes liegen. Diese drei Errungenschaften sind jeweils in ihrem eigenen div, eingepackt in eine Spanne.

<section class="achievement_wrapper">
<div class ="achievement" id="achievement1"><p class="achievement_text">Achievement 1</p></div>
<div class ="achievement" id="achievement2"><p class="achievement_text">Achievement 2</p></div>
<div class ="achievement" id="achievement3"><p class="achievement_text">Self-Authoring Suite</p></div>
</section>

Wenn ich die Browserbreite reduziere, würde ich gerne fürSie sollten in eine Kolonne kollabieren, wenn die Größe es erfordert. Aus irgendeinem Grund kann ich es nicht passieren, egal was ich versuche zu versuchen. Der aktuelle Code der Wrapper-Klasse:

.achievement_wrapper {
display: flex;
flex-flow: row-wrap;
align-items: flex-end;
}

Oder ist es vielleicht etwas mit Spezifität, das die ganze Sache durcheinander bringt?

Ich möchte, dass diese in getrennten Reihen auslaufen, wenn sie keinen Platz mehr haben.

Antworten:

0 für die Antwort № 1

Ich sehe, dass Sie eine Medienabfrage haben, aber Sie haben einen Sintax-Fehler

Für große Bildschirme

@media screen and (min-width: 450px){
.achievement_wrapper {
display: flex;
flex-flow: row;
align-items: flex-end;
}

Für kleine Bildschirme

@media screen and (max-width: 449px){
.achievement_wrapper {
display: flex;
flex-flow: column;
align-items: flex-end;
}

Verwendung der row und column Werte, wird Ihr gewünschtes Ergebnis geben.

Es wird empfohlen, einen ersten mobilen Ansatz zu haben. Sie sollten also nur eine Medienabfrage und einen Standard-Mobile-Stil haben. Dein Code sollte also so aussehen:

.achievement_wrapper {
display: flex;
flex-flow: column;
align-items: flex-end;
}

@media screen and (min-width: 450px){
.achievement_wrapper {
display: flex;
flex-flow: row;
align-items: flex-end;
}

}

Hoffe, das ist, was Sie gesucht haben. Gerne erklären oder helfen Sie bei Bedarf eine bessere Lösung.

---