Clearing issue in mobile 1/5th columns with 50% width

ach schon mal ne Lösung für die Footer Problematik (auch hier sind es ja 5 Säulen) du hast dort die Schrift verkleinert – brauchst du so garnicht.
Du kannst aber auch hier auf 2 2 1 gehen
du siehst die media querries pixelwerte kannst du ja dann deinen Bedürfnissen anpassen.

@media only screen and (min-width: 480px) and (max-width: 989px) {
#footer .av_one_fifth {
    margin-left: 0% !important;
    width: 50% !important;
}

.responsive #footer div .av_one_fifth:nth-child(2n+1) {
    clear: both !important;
}
}

bei 5 er columns geht es ähnlich
wie gesagt ich habe mal auf der Testseite das so angelegt : 1/5 dann individuelle Höhe (sonst ist das auf display: table-cell) und keine Zwischenräume (die lege ich selbst fest.

dann :

#top .no_margin.av_one_fifth {
    width: 18%;
}
#top div .no_margin {
    margin-left: 2% !important;
    margin-top: 0;
}

@media only screen and (min-width: 480px) and (max-width: 990px) {
#top .no_margin.av_one_fifth {
    clear: none !important;
    width: 48% !important;
}
#top .no_margin.av_one_fifth:nth-child(2n+1) {
    clear: both !important;
}
}

mit den Abständen kannst du ja was spielen.
wichtig ist eben: kein clearing über die columns bis auf (2n+1)

das ist noch nicht ganz perfekt, weil da jetzt links rechts ein anderer Abstand ist.
man könnte dann für #top .no_margin.av_one_fifth.first was setzen etc. – aber so sieht es auch schon besser aus

hast du einen direkt link dahin – ich finde die 5 spalter nicht

ich hatte ganz bewußt auf diese Spanne gestellt. Wenn es zu klein wird um gesehen zu werden ist es auch doof oder?
480px ist die Handy Querformatmarke.
Wenn du auch auf dem Handy im Hochformat das haben willst musst du die untere Marke auf 320px stellen
oder gar noch kleiner einstellen – ein Link wäre genial, weil dann kann man optimieren.
ZB würde ich dann das padding links/rechts wohl verringern Mobilen Fall ( du hast das generell auf 15% – finde ich recht üppig bei 320px breite.

und btw. wenn du von 4 auf 5 Spalten stellst musst du jedesmal leider auf die erste Spalte gehen um dort die Parameter neu einzustellen.
(individuelle Höhe, und kein Platz zwischen den Spalten – denn ich glaube per default ist das auf equal height und space gestellt)

bitte nichts mehr ändern: und folgenden code einfügen (den rest bitte löschen)

@media only screen and (min-width: 320px) and (max-width: 990px) {
body .column-top-margin {
    margin-top: 0;
}

div .av_one_fifth {
    margin-left: 2% !important;
    width: 44%;
  clear: none !important
}

div .av_one_fifth:nth-child(2n+1) {
    clear: both !important;
}
}

• This reply was modified 7 years, 7 months ago by Guenni007.

ok – so geht es ja jetzt

PPS:

setze mal in quick css:

#mobile-advanced {
    background-image: url("http://ahlers-vogel1.x-production.com/wp-content/uploads/2016/10/Ahlers-Vogel_Logo.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 40% auto;
    padding: 10% 0 !important;
}

und schau dann in das mobile menu rein
eventuell nimmt man da auf Grund deines grauen Hintergrundes ein anderes Logo ( ganz Weiss vielleicht oder composite)

your welcome