Weißer Streifen zwischen Banner und Logo/Menü (wenn kein Header)

Servus, wie bekomme ich den Streifen weg? Das ist nur auf Seiten ohne Header und nur im Responsive (z. B. Handy). Mit Header ist der Übergang nahtlos.

VG Mirco

Zitat von Mario

Hallo Mirco,

um da helfen zu können fehlen ein paar Infos und wenn möglich ein Link zur Seite.

Ich habe das jetzt versucht raus zu finden.

Top Responsive, und der Text "aus Düsseldorf, ..." wurde über den "Bannerbereich" eingefügt?

Ich habe das mit diesen Einstellungen getestet und im "Bannerbereich" einen Text-Artikel eingefügt. Da erhalte ich keine Linie. Wie wurde denn der der Text "aus Düsseldorf, ..." eingbunden?

Hallo Mario, stimmt TOP RESPONSIVE. Ich habe dir die 404-Seite mit einem Banner-Text bereitgestellt: https://www.deineschlagerwelt.de/seite-nicht-gefunden.html.

Ich will dann im Banner-Bereich eine Laufschrift laufen lassen.

VG Mirco

Zitat von Mario

Ich habe mir die Seite https://www.deineschlagerwelt.de/seite-nicht-gefunden.html am Desktop in verkleinerter Ansicht und unter Android Smartphone angeschaut.

Grundsätzlich kann ich diesen Streifen nicht sehen. Wenn ich aber nach unten scrolle und dann wieder nach oben ist während der Animationszeit "transition" (wenn das Logo wieder größer scalliert wird) ein unschöner Effekt zu sehen.

Stefan S

Hallo Mario, ja beim Desktop ist alles fein. Auch in der Vorschau bei ZP wenn man auf Mobile Ansicht wechselt. Ich selbst habe ein iPhone. Dann schaue ich mal beim CSS in der mobilen Ansicht. Ja die Banner Einblendung müsste ich auch mit Transition verlangsamen, bzgl den Effekt, den du ansprichst. Ich Rätsel nur, warum auf dem iPhone die kleine Lücke ist, so als wenn ohne Header der Hintergrund im Bereich Banner und Menü weiß wäre und nicht zu 0 geschlossen ist. Ganz schön kniffelig.

LG Mirco

Zitat von Steffen T.

Also ich kann das mit einem Testprojekt nicht reproduzieren.

Ich vermute die Ursache daher in den eigenen CSS-Anpassungen.

#topline #logo img {
    width: auto;
    transition: all 0.5s ease;
}
#topline.smaller #logo img {
    height: 80px;
    transition: all 0.5s ease;
}
@media only screen and (max-width: #val(mobileView)px) {
  #topline {
    height: 130px !important; 
    margin-top: 0px !important;
  }
  #topline #logo img {
    height: 100px;
    transition: all 0.5s ease;
  }
  #topline.smaller {
    height: 80px !important;
  }
  #topline.smaller #logo img {
    height: 60px;
    transition: all 0.5s ease;
  }
 }