Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:
.leistung {
padding: 15px;
margin: 15px;
}
.leistung-container {
display: flex;
flex-direction: column;
}
/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */
@media (min-width: 25em) and (max-width: 45em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(50% - 2em);
/* Zwei Boxen nebeneinander */
}
}
/* Layout für PC (nebeneinander) */
@media (min-width: 45em) and (max-width: 65em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(33.33% - 2em);
/* Drei Boxen nebeneinander */
}
}
@media (min-width: 65em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(33.33% - 2em);
/* Drei Boxen nebeneinander */
}
}
Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön
