Responsive Timeline

    Guten Abend verehrte community


    Ich hoffe es gibt jemanden, der mir bei meinem Problem helfen kann. Ich möchte für unsere Vereinswebsite eine Timeline einbinden. Dazu bin ich auf die Vorlage https://codepen.io/tallulahh/pen/zYorZxy gestossen. Diese konnte ich einbinden und entsprechend anpassen. Nur ist die Darstellung auf Mobilgeräten unbefriedigend. Ist es möglich, dass die Linie beim unterschreiten einer Mindestgrösse nach links wandert und die Textfelder auf der rechten Seite untereinander angereiht werden? Was muss konkret angepasst werden? Leider komme ich nicht mehr weiter und habe schon viel Zeit investiert.


    Beste Grüsse

    Tinu

    Zitat von tinu

    Ist es möglich, dass die Linie beim unterschreiten einer Mindestgrösse nach links wandert und die Textfelder auf der rechten Seite untereinander angereiht werden?


    Ja, natürlich ist es möglich, sehr leicht sogar. Du musst nur etwas CSS ändern.


    Da Komplettlösungen hier nicht erwünscht sind, gebe ich Dir drei Tipps:

    1. Schau Dir das margin des li-Elements an. Durch die Änderung der Werte kannst Du die Linie nach links rücken.
    2. Schau Dir dann die Positionierung der div-Elemente innerhalb der li-Elemente an. Sie wurde für gerade und ungerade Elemente verschieden deklariert, eine von beiden muss geändert werden.
    3. Wenn Du möchtest, dass die Textfelder ausschließlich von rechts erscheinen, dann ändere auch noch die Regel für die Transformation dieser Elemente.

    Das Ganze schreibst Du in einer Media-Query für den gewünschten Breakpoint, fertig. Viel Erfolg!

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden