Browser breite und Position der Inhalte

Hallo,
ich habe bei mir Contao 4.4 und das Nature Theme installiert.
Bin soweit zufrieden und komme auch für meine Bedürfnisse ganz gut klar damit.
Nur leider ist es inzwischen so, dass der Seiten Inhalt, je nach Browser breite, die Position in der Höhe verändert.

Betroffen sind alle Seiten.
Auch wenn ich im Themes Layout die Kopf- und Fußzeilen ausblende.
Oder meine CSS und Templates Änderungen zurücksetze.

War mir gar nicht bewusst, dass ich schon so tief in der Materie bin.
Muss zugeben try and error verwende ich schon ganz gerne mal und ans Ziel zu kommen.
Da ist mir wohl irgendwas durch die Lappen gegangen.

Hier Bilder von dem Effekt, Layout und der Link zu meiner Seite.

Anhang 23484
Anhang 23485
https://airster.de/werkstatt/werkstatt.html


MfG Timo

Erst einmal herzlich Willkommen im Forum.
So ganz sicher bin ich mir zwar noch nicht was Du meinst, denn Ausblendungen von bestimmten Inhalten können ja durchaus gewollt sein. Wenn dann weniger Inhalt vorhanden ist und nicht explizit eine Höhe angegeben ist, ist es völlig klar, das sich auch die Höhe verändert.
Ich versuche mich jetzt trotzdem Mal.

Bei einem Viewport von 1023px wird die Navigation der Klasse navbar-menu über

Code:

---

.navbar-menu {

display: none;

}

---

ausgeblendet. Das Ausblenden der navbar-menu ist die Ursache für die Veränderung der Höhe.
Bei einem Viewport bis maximal 768px wird die innerhalb von main vorhandene Navigation mit der Klasse navbar-menu über

Code:

---

#main .navbar-menu {

display: block;

}

---

eingeblendet.

Alles das kann man in den Entwicklertools des Browsers Deiner Wahl sehen.

Bei genauerem Hinschauen fällt mir dann noch auf, das es eine Navigation mit der ID navbarMain im header und in main gibt. Zweimal die gleiche ID geht schon mal gar nicht.
aside innerhalb eines Artikels und das wiederum innerhalb von main habe ich so auch noch nicht gesehen. Ob das von Dir oder durch das Thema kommt kann ich nicht sagen. Ich kenne das Theme nicht. In der Demo des Themes habe ich das jedenfalls auf Anhieb nicht so finden können. Ob es semantisch korrekt ist, habe ich nicht explizit geschaut. So aus dem Bauch heraus bezweifele ich das zwar, bin mir aber nicht sicher.
Und dann haben wir noch einen footer innerhalb von footer. Das ist auf jeden Fall ein HTML-Fehler.

Bevor Du Dich mit einzelnen Effekten auseinandersetzt, solltest Du Dich immer vergewissern ob Du Fehler im HTML oder im CSS hast. Wenn Du kein eigenes HTML schreibst und das Theme sauber entwickelt wurde treten normalerweise auch keine HTML-Fehler auf.
Gerade wenn Du eigenes HTML schreibst und/oder das CSS- eines Themes anpasst, solltest Du Dich gut mit HTML und/oder CSS vertraut machen.
Nur Try and Error ist m.E. dafür kein zielführender Weg.