Mir zerreißt es den Footer

Thema wurde von Anonymous, 17. März 2017 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.520
    Danke erhalten:
    315
    Danke vergeben:
    1.223
    Hallo,

    habe einen Shop auf 1200px Breite eingestellt und in der Größe sieht auch alles toll aus. Auf kleineren Monitoren bzw. auf dem Tablet zerreißt es mir aber völlig den Footer :(

    Was hab ich da schon wieder falsch eingestellt, dass der Footer nicht responsive mit verkleinert wird?

    Shop: www.japanteashop.com
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    Das sieht alles richtig aus.
    Der Footer darf ja nciht einfach verkleinert werden, sonst ist er nicht mehr nutzbar.
    Deshalb werden im Tablet zwei Spalten übereinander und im Smartphone alle Spalten übereinander dargestellt.

    Ich sehe gerade, dass im Tablet eine Spalte nach unten versetzt ist....
    ... das dürfte daran liegen, dass die Spalte 1 höher ist als die Spalte 2
    Du hast eine Mindesthöhe von 300px eingetragen, die erste Spalte ist aber 321px hoch.
    Wenn Du das änderst sollte es passen.
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.520
    Danke erhalten:
    315
    Danke vergeben:
    1.223
    Ja, genau, das meine ich, dieses versetzte ärgert mich gerade ein wenig :(
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    Code:
    @media (min-width: 768px){
    #footer .inside .row .footer-col-2, #footer .inside .total-box table tr.total .footer-col-2, .total-box table #footer .inside tr.total .footer-col-2 {
        min-height: 321px;
    }}
    versuche es mal damit
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.520
    Danke erhalten:
    315
    Danke vergeben:
    1.223
    Danke! So sieht's jetzt in der Vorschau auf dem Tabletmodus schonmal richtig aus, leider ist es auf einem Desktop PC bei kleinerer Bildschirmauflösung immer noch versetzt. Cache auch per FTP geleert, keine Besserung.
     
  6. Die 4 Footer-Boxen müssen gleich hoch sein, dann klappt das auch in allen Ansichten.
    Hatte mir geholfen, indem ich allen Footer-Boxen einen border-bottom verpasst habe:
    Code:
    #footer .inside > .row > div:nth-of-type(2n+1) {
        border-bottom: 1px solid black;
    }
    #footer .inside > .row > div:nth-of-type(2n+2) {
        border-bottom: 1px solid black;
    }
    und dann die Boxen in der Höhe so verändert habe, bis die border-bottom in der Desktop-Ansicht eine Linie ergeben.
    Dann sehen die in allen Ansichten auch ordentlich aus.

    Nachtrag: Aber letztendlich habe ich mir für die mobile Ansicht ein Accordion eingebaut, weil der Footer da so ellenlang ist.
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    20. November 2015
    Beiträge:
    1.520
    Danke erhalten:
    315
    Danke vergeben:
    1.223
    Das muss ich probieren, danke! Das mit dem Akkordion für den Footer ist ziemlich cool, wie hast Du das gemacht?