Div Anordnung bei Veränderung der Bildschirmgröße

  • Hallo, ich habe vier Divs die immer zu zweit nebeneinander bzw. untereinander angeordnet werden sollen. Das ganze klappt auch ziemlich gut, bis man die Bildschirmgröße ändert. Wird der Bildschirm kleiner, so sollen die Divs nur noch untereinander angeordnet werden, dafür aber auf die gesamte Breite gestreckt werden und vor allem bei der mobilen Ansicht ist es wichtig, dass alles untereinander ist, da es sonst zu klein ist. Ich kriege das nur leider nicht hin.

    Der Code:

    HTML:

    HTML-Code:

    CSS:

    HTML-Code:

    Code
    body{  margin: 0px;  padding: 0px;}
    .main{  max-width: 1500px;  margin: auto;}
    .element{  float:left;  width: 48%;  min-width: 410px;  margin: 1%;  margin-bottom: 0px;  padding-bottom: 0px;  background-color: lightblue;}
    .element img{  width: 100%;}
    .element .content {  text-align: left;  padding: 3%;}

    PS: Die Bilder haben alle eine Größe von 591 x 394 Pixel, das dürfte wichtig sein.

    Ich lade das Projekt auch mal hoch, falls es jemand testen will. Ich konnte leider nur eines der 4 Bilder drin lassen, da es sonst zu groß gewesen wäre.


    Vielen Dank schon mal im voraus für die Hilfe!

  • Schade das gelöscht, weil mich würde das auch interessieren.


    Bei CSS bin ich nämlich ein Blindgänger, kann nur einfache Sachen.


    Ich hoffe ich werde nicht auch geöscht....

  • Zitat

    mich würde das auch interessieren.

    Dann soll dir geholfen werden, bevor dieser Thread geschlossen wird. Informiere dich über Mediaqueries und Flexlayout:

    https://www.html-seminar.de/css-flexbox.htm

    https://wiki.selfhtml.org/wiki/CSS/Media_Queries

    Mit Flex kannst Du die Anordnung der Container fest legen, nebeneinander oder untereinander. Und mit Mediaqueries kannst Du zwischen beiden je nach Bildschirmbreite umschalten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!