Footer

[designpilot]

Ein Hallo an die Contao Community

Ich bin am entwerfen einer neuen Webseite, nun stehe ich beim Footer ein wenig an. Auf dem normalen Desktop sieht alles super aus, nur wenn ich das Browser Fenster kleiner ziehe wird der Text des Footers auf einmal ganz an den linken Rand geschoben. Ich habe das mit padding-left und margin-left schon probiert (der Text wird dann zwar wie gewünscht nach rechts geschoben, aber dafür habe ich dann ein scrollen nach links und rechts was entsteht).

Das Footer-Modul hat folgenden Inhalt:
Bildschirmfoto 2018-09-18 um 20.47.27.png

Das CSS dazu hat folgenden Inhalt:
Bildschirmfoto 2018-09-18 um 20.51.01.png

Screenshot grössere Bildschirm Ansicht:
Bildschirmfoto 2018-09-18 um 20.35.36.png

Screenshot kleinere Bildschirm Ansicht (hier sieht man den Text links schon anliegend):
Bildschirmfoto 2018-09-18 um 20.34.58.png

Screenshot Smartphone Ansicht:
Bildschirmfoto 2018-09-18 um 19.48.05.png

Im Screenshot für das CSS hat es ja ein overflow: hidden; drin, das verhindert im Moment das Scrollen nach links/rechts ab einer gewissen Browser Fenster Grösse.

Ich hoffe sehr, das jemand von Euch mir dabei helfen kann das Problem zu lösen. Ich denke das es wahrscheinlich nur ein CSS Problem ist (das ich da irgendwas falsch gemacht habe) wobei ich denke nicht das es so ein grosses Problem sein wird.

[tab]

Um welches Grid handelt es sich denn da und wie hattest du dir die ? Das gezeigte CSS betrifft ja nur den Footer selbst. Es macht im Wesentlichen nichts anderes, als eben dem Footer die volle Breite von 100% zuzuweisen und das darin befindliche div.inside auf eine Breite von 1280px zu beschränken und es bei größerer Breite des Footers dann eben im Footer zu zentrieren. Wen also der Footer schmäler als 1280px ist, dann resultiert jedenfalls aus diesen Regeln keine Margin, die muss dann ggf woanders herkommen. Sicherlich wird da so manches noch durch media queries je nach Viewport-Breite überschrieben. Wie das genau bei diesem Grid gedacht ist, kann man jedenfalls aus diesem kleinen Teil des CSS nicht entnehmen. Wird man sich vermutlich selbst darum kümmern müssen, wenn da eine linke Margin /Padding gewünscht ist. Dass auf dem großen Bildschirm, wo die Breite ja offenbar größer als 180px ist, die Inhalte nicht im Footer linksbündig dargestellt werden, liegt einfach daran, dass das kleinere, nur 1280px breite div.inside im Footer zentriert ist (margin: 0 auto; ). Innerhalb dieses div.inside werden die Inhalte aber wohl auch linksbündig sein. Schau es dir einfach mal in den Entwicklerwerkzeugen des Browsers an.

[designpilot]

Also ich habe jetzt das euf_grid im Einsatz ich müsste mal probieren ob es sich mit dem Rocksolid Columns anders verhält. Mir ist jetzt aufgefallen, das es sich anders verhält im Rocksolid Columns denn dort habe ich das Problem so nicht. Kann das sein, das es wegen den Einstellungen für das euf_grid sich so verhält ????

Ich habe jetzt mal das Rocksolid Columns probiert und dort mal die padding-left: 20px; ausprobiert (musste das im #footer .inside machen) und siehe da es geht. Ich muss mir das euf_grid mal näher anschauen, da es sehr viele Einstellmöglichkeiten bietet und echt praktisch ist (es kann in diesem Falle echt sehr viel und ist möchtig).

Danke Dir auf jeden Fall tab für deine Anregung