Projekt Flexbox Galerie mit Isotopen Auswahl

Emess · 11. November 2023

Mal sehen was die Freund sagen?

Jedenfalls Tausend Dank für deine Hilfe

Emess · 12. November 2023

Habe gerade etwas mit der Aboutme section experimetiert.

Dabei ist mir aufgefallen, dass der Filter Selektor noch nicht responive ist.

Habe im Inspector etwas rumgedoktort um eine media querry zu erstellen. Das ist aber gescheitert. jedenfalls bekam ich es nicht hin.

Deshalb dachte ich mir, dass die filter.js der schlüssel sein könnte.

Wenn du Zeit und lust hast könntest du ja mal drüberschauen.

Sempervivum · 12. November 2023

Das einfachste dürfte sein, die Buttons mit flex anzuordnen und den Zeilenumbruch frei zu geben:

Code

#filter ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

Emess · 12. November 2023

Ich werd verrückt!

Doch zu Verständnis. Ich habe jetzt zwei ul Regeln was genau ist der feine Unterschied

CSS

#filter ul{
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

#filter>ul{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(2, 2, 2, 0.57);
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

Alles anzeigen

Die untere Regel betrachtet die ul als Kind. Nehme ich an?

Aber was macht die erste? Davon abgesehen, dass sie mein Problem löst.

Sempervivum · 12. November 2023

Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.

#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.

Das ist hier ganz gut beschrieben:

CSS/Tutorials/Selektoren/Kombinator – SELFHTML-Wiki

Emess · 12. November 2023

Wieder code gespart.

Habe mit Hilfe deiner verlinkten Seite "Selfhtml" sie Section "about me" angegangen und habe es auch jetzt responsive hinbekommen.

Allerdings verzweifel ich an der Überschrift flex-item-left>h1 die baut sich einfach links vom Text auf. Ich denke das wird in meinem Fall mit jedem

tag passieren. Ich steh da auf dem Schlauch.

Die wilden Farben auf der Seite dienen nur meiner Orientierung um zu erkennen wo sich beim testen was ändert

miflo.de

Sempervivum · 12. November 2023

flex-item-left>h1 finde ich aber ich weiß nicht genau, was Du erreichen willst? Soll diese Überschrift über dem Text stehen? Dann musst Du entweder flex-direction: column; hinzu fügen oder einfach das display: flex; weg lassen, dann bauen sich die Elemente ohnehin übereinander auf.

Emess · 12. November 2023

Damit kann ich erst mal weitermachen

Projekt Flexbox Galerie mit Isotopen Auswahl

Jetzt mitmachen!

Teilen

Tags