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
    1. body{ margin: 0px; padding: 0px;}
    2. .main{ max-width: 1500px; margin: auto;}
    3. .element{ float:left; width: 48%; min-width: 410px; margin: 1%; margin-bottom: 0px; padding-bottom: 0px; background-color: lightblue;}
    4. .element img{ width: 100%;}
    5. .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....