Frage Neue Ebene zum runter scrollen.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Das liegt daran, dass ich für body align-items: center; definiert hatte. Für den Container habe ich dies jedoch mit align-self: stretch; umgeändert, so dass dieser Container die volle Breite einnimmt. Ich habe dein letztes Pastebin in eine Testseite kopiert und dort habe ich keine Ränder. Hast Du bei dir auch das align-self: stretch; drin?
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
Das liegt daran, dass ich für body align-items: center; definiert hatte. Für den Container habe ich dies jedoch mit align-self: stretch; umgeändert, so dass dieser Container die volle Breite einnimmt. Ich habe dein letztes Pastebin in eine Testseite kopiert und dort habe ich keine Ränder. Hast Du bei dir auch das align-self: stretch; drin?
Ah, Vielen Dank!
Jetzt sieht es gut aus.
Hast du mir eventuell noch Tipps, für Gestaltung etc.
Gibt es da gute Turtorials oder sonstiges?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Für Grid und Flex gibt es vieles, dieses sind gute Übersichten:

Oder, wenn Du mehr ein Tutorial suchst, empfehle ich Selfthml:
 
  • Love
Reaktionen: Skyfay
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Das liegt daran, dass wir die Höhe auf 100vh fest gelegt haben. Wenn das Browserfenster in der Höhe klein ist, passen die Inhalte nicht mehr hinein. Lösung einfach, indem wir statt height min-height nehmen:
min-height: 100vh;
Alternativ kann man auch die entspr. Flex-Anweisung verwenden:
Code:
/*min-height: 100vh;*/
flex: 1 0 100vh;
d. h. die Basis für die Höhe soll 100vh sein und größer werden aber nicht schrumpfen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Ich nehme an mit der Anpassung für das Handy meinst Du, dass die Items bei schmalem Browserfenster nicht mehr hinein passen? Dafür gibt es mehrere Lösungen, die einfachste ist, dass wir den Zeilenumbruch für Flex zulassen:
Code:
        .items {
            display: flex;
            /* Zeilenumbruch zulassen: */
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 18px 0 10px 0;
        }

        .item {
            flex: 1 0 auto;
        }
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
Ich nehme an mit der Anpassung für das Handy meinst Du, dass die Items bei schmalem Browserfenster nicht mehr hinein passen? Dafür gibt es mehrere Lösungen, die einfachste ist, dass wir den Zeilenumbruch für Flex zulassen:
Code:
        .items {
            display: flex;
            /* Zeilenumbruch zulassen: */
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 18px 0 10px 0;
        }

        .item {
            flex: 1 0 auto;
        }
Das funktioniert sehr gut!
Allerdings wenn ich das mache wird eines der Bilder extrem gross.


Ich bin weiss leider auch nicht genau woran das liegt.
Wenn ich das Fenster kleiner mache, dann wird dieses eine Bild auch kleiner.


Die Icons auf der ersten Seite stimmen auch nicht mehr genau.

So sollte es sein: https://www.bilder-upload.eu/bild-a5ee8c-1616414717.png.html

So sieht es aktuell aus: https://www.bilder-upload.eu/bild-202be5-1616414749.png.html

Die Icons sind da irgendwie bisschen zu weit rechts.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Wenn ich deinen letzten Code von Pastebin übernehme, passt bei mir überhaupt nichts mehr, die Bilder sind viel zu groß. Da hatte ich etwas gepostet ohne zu testen und es funktioniert nicht.
Mir scheint, mit einem Gridlayout kommt man da besser zum Ziel. Mit diesem CSS sieht es bei mir gut aus:
Code:
        .items {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            max-width: 800px;
            width: 90%;
        }

        @media(max-width: 600px) {
            .items {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media(max-width: 300px) {
            .items {
                grid-template-columns: 1fr;
            }
        }
Und dann alles andere für .items löschen. Dann sind bei mir die Bilder unterschiedlich groß aber das liegt dann daran, dass unterschiedliche Margins und Paddings definiert sind. Diese am besten auch heraus nehmen.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Ich vermute mal, dass es bei mir ganz anders aussieht als bei dir, weil ich ganz andere Bilder habe als Du, ich habe aus meinem Bestand Testbilder von ungefähr 600x450px genommen.
 

Skyfay

Mitglied
21 März 2020
111
0
16
18

Hier ist alles, HTML, CSS, JS und die Bilder.

Da kannst du oben auf herunterladen klicken, und dann sollte es so aussehen wie bei mir.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
OK, habe ich herunter geladen. Bei breitem Bildschirm sieht alles OK aus, aber bei schmalem schrumpfen die beiden Icons links. Mache ich sie gleich groß, dann passen alle vier nicht mehr in die Breite. Es bricht nichts um und wir sind wieder da, wo wir am Anfang waren. :frown:
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Ja, das CSS mit Grid, das ich in #31 gepostet habe. Damit reduziert sich die Anzahl der Icons pro Zeile zunächst auf zwei und dann auf eines, so dass sie untereinander liegen. Versuche es. Und am besten erst Mal alles Padding und Margin bei den Icons heraus nehmen.
 

Skyfay

Mitglied
21 März 2020
111
0
16
18
Wenn ich das mache, dann sind die Icons bei mir irgendwie ganz komisch und extrem klein.

Ich glaube, dass ich grad einiges falsch mache o_O
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Bei mir sieht das ganz gut aus, nur bei knapp über 1000px Breite sind die mittleren beiden Icons zu klein:
skyfay-error.jpg
Das liegt dann am Margin, deaktiviere ich das, sind sie gleich groß:
Code:
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
 
  • Like
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
111
0
16
18
Bei mir sieht das ganz gut aus, nur bei knapp über 1000px Breite sind die mittleren beiden Icons zu klein:
Anhang anzeigen 5550
Das liegt dann am Margin, deaktiviere ich das, sind sie gleich groß:
Code:
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
Ah, jetzt sieht es sehr gut aus.
Mir ist aber aufgefallen, dass wenn ich es klein mache unten alle Formatierungen weg sind.
 
Werbung: