Design- und Verständnisproblem mit responsivem Design

  • Hallo,
    ich habe meine Seite Harzer-Bergwald.de mit Joomla 3.4.8 und dem Template Sunseteclipse erstellt. Wenn weiterer Bedarf an Informationen besteht, reiche ich das sofort nach.


    Nun ist dies mein erstes Projekt und ich habe kaum Erfahrung mit Joomla. Das responsive Design habe ich gewählt, da nach meinen Recherchen so etwas u.a. auch bei der Suchindexierung bewertet wird und zum anderen ist es bei meiner Zielstellung wichtig, dass vor allem mobile EG die Seite gut darstellen. Dabei habe ich aber auch ein Problem, dass bei veränderlichen Bildschirmauflösungen die Module an meinem Heimbildschirm mit gleicher Höhe angezeigt werden, am Arbeitsplatz leider mit unterschiedlichen Höhen dargestellt werden, was einen Treppenlook entstehen lässt. Ist das ein Effekt des responsiven Designs, den man hinnehmen muss oder kann man das optisch etwas aufhübschen und den unteren Abschluss benachbarter Module aneinander ausrichten? Ich würde gern weitere kleinere Bausteine, wie z.B. eine Terminvorschau auf der Startseite anzeigen lassen, fühle mich da aber im Moment etwas überfordert, wegen der beschriebenen Auswirkungen im Design.


    Vielen Dank
    Thomas

  • Hinnehmen muss man nichts.
    Dein Problem ist, dass Deine Inhalte unterschiedlich sind. Die Galerie wird z.B. von 3- auf 2- dann einspaltig. Logisch, dass der Inhalt sich irgendwo ausbreiten muss. Bei 3 Modulen nebeneinander wirst so also immer Weißraum haben.


    Ich würde das Problem so lösen, dass ich schon bei einem Breakpoint von 800px, die "Module" nicht mehr floaten lassen würde, sondern sie untereinender (float:none;) anzeigen lassen würde.


    Ich kenne Dein Template nicht, vielleicht gibt es in den Templateoptionen Einstellungen?
    Wenn nicht, musst Du per Hand die CSS für die responisve Dartsellung anpassen.

  • Danke Tom,
    bei deinen Erklärungen zur Lösung kann ich nur teilweise folgen. Wo wird der Breakpoint festgelegt? Wenn ich das Floaten unterbinde, gilt das Design dann noch als responsiv? Ich habe einige Float-Befehle in der responsive.css gefunden. Nur tue ich mich schwer, diese Angaben zu ändern, aus Sorge etwas zu falsch zu machen. Wonach muss ich gucken, um die richtige Bereiche für die Module zu erwischen? Die CSS hat 7.500 Zeilen.


    Grüße Thomas

  • Die rsponsive.css scheint die richtige Datei zu sein.


    Breakpoints werden über Mediaqueries gesteuert.
    Ob etwas floatet oder nicht hat nichts damit zu tun ob etwas responsive ist oder nicht. Je nach Breakepoint wird es benötigt oder nicht.


    Drück in Deinem Browser F12, damit kannst du Deine CSS analysieren.
    Hier www.css4you.de und https://wiki.selfhtml.org/wiki/CSS/Media_Queries kannst Du Dich in das Thema einlesen.