Responsive Bottom Section

    Hallo zusammen,


    seit zwei Wochen bastele ich an einer neuen Webseite für einen Freund. Ich selbst hatte bis dahin keine große CMS Erfahrung und da die alte Webseite mittels Joomla betrieben wurde, entschloss ich mich dies so weiterzuführen. Nach kurzer Recherche habe ich mich dazu entschlossen das Helix 3 Framework zu nutzen.


    Als "Neuling" finde ich es ziemlich Klasse, die Seiteninhalte lassen sich ohne großen Kenntnisse so wie gewünscht gestalten. An und für sich bin ich mit der Webseite, wie sie bis jetzt ist, zufrieden. Lediglich der Footer macht mir Probleme. Besser gesagt ist es nicht der Footer sondern die Bottom Row. Als Template nutze ich das shaper_helix3_default.


    Da im Footer-Bereich auf der Webseite die Informationen, wie sie nun dargestellt sind angezeigt werden sollen, entschied ich mich dazu die Footer Row zu entfernen und eben die Bottom Row als unterste Row zu verweden. Soweit so gut, nun zum Problem. Die Bottom Row arbeitet jedoch nicht responsive, auf manchen Seiten ist noch nicht viel Inhalt bzw. wird auch nicht all zu viel mehr Inhalt hinzukommen, dadurch rutscht die Bottom Section nach oben und ganz unten bleibt eine leere Fläche, in meinem Fall ein weißer Streifen. Ich habe bereits mittels custom.css versucht die Bottom Section zu fixieren, leider ohne Erfolg. Eine Möglichkeit wäre natürlich den Artikeln leere Absätze hinzuzufügen, jedoch ist dies auch keine saubere Lösung. Darum meine Frage, besteht die Möglichkeit die Bottom Section, responsive am Webseitenende zu fixieren? Ich bin für jede Art von Vorschlägen offen und dankbar.


    tl;dr: neue Webseite mit Helix 3 Framework, Footer entfernt, Bottom Section ist neuer Footer, Bottom Section arbeitet nicht responsive


    Die Webseite ist unter http://neu.autoservice-haberle.de/ zu erreichen. Ein gutes Beispiel für das Problem bietet die Seite http://neu.autoservice-haberle…ngen/werkstatt/lackierung


    Gruß morol

    Hallo Morol,


    wenn ich dich richtig verstehe suchst du eine Möglichkeit einen fixed footer zu machen. Eine Hilfe dazu findest du hier: https://www.w3schools.com/howto/howto_css_fixed_footer.asp


    An CSS müsstest du deiner Seite folgendes mitgeben:


    Code
    #sp-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}


    Problem an der Sache ist halt, dass es dir das ganze responsiv total zerschießt, weil auf dem Handy der Footer dann viel zu groß ist. Ich weiß nicht, welche Funktionen Helix dazu schon mitbringt, aber ansonsten kannst du das über ein mediaquery fixen und den entsprechend CSS Code nur auf dem Desktop anwenden lassen. Falls Helix dazu nichts bietet findest du hier, wie diese formuliert werden. Ist eigentlich total einfach https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Danke euch beiden für die schnellen Antworten.


    Habe beide Methoden ausprobiert.

    Bei der Methode von Johannes greift der Code bei mir nur auf dem Smartphone, aber wie bereits beschrieben ist der Footer dann viel zu groß, die Desktop Version bleibt komischerweise unverändert. Ich werde mir die mediaquerys anschauen vielleicht bekomme ich sie so umgesetzt dass der custom.css code nur bzw. überhaupt bei der Desktop Version umgesetzt wird.


    Die Variante von Anka, hat soweit funktioniert. Jedoch bin ich mit der Optik nicht ganz zufrieden, da Richtung Webseitenende sehr viel Platz ist. Über die Gestaltung der Seiten mit wenig Inhalt werde ich mir noch Gedanken machen.


    Gruß morol

    Servus morol,


    unterhalb von 992px wird auf zwei Spalten pro Reihe umgeschaltet, allerdings ist die erste Spalte länger als die zweite, deshalb bleibt die dritte Box rechts "hängen". Du könntest dort eine min-height angeben. Wenn die Höhe ausreicht, rutschen die dritte und die vierte Box in die zweite Reihe.


    Eine andere Möglichkeit wäre, die erste Box unterhalb von 992px nach rechts floaten zu lassen, sieht auch nicht schlecht aus.


    @media all and (min-width: 768px) and (max-width: 991px) {

    #sp-botttom1 {

    float: right;

    }

    }


    Grüße

    Stefan