Probleme bei kleinen Browserfenstern

**wigraf** · 19.08.2016, 09:22

Guten Tag liebe Community,
hier habe ich schon manchen guten Tipp erhalten und wende mich deshalb wieder einmal an die Fachleute.
Mit meiner Website, die ich nur so als Hobby für mich mit Contao 3.5.15 erstellt habe bin ich soweit zufrieden. Hier ist sie: www.graffenberger.de
Was mich stört ist das Aussehen auf kleinen Bildschirmen, z. B. auf meinem Smartphon oder wenn ich das Browserfenster im Firefox klein mache, siehe Bild: my_site_klein.PNG
Zwischen Header und Container erscheint ein grauer Streifen. Kann mir jemand helfen diesen Streifen zu verhindern?
Mit freunlichen Grüßen
Wilhelm Graffenberger

**Spooky** · 19.08.2016, 09:31

Der graue Streifen ist der Hintergrund aus deinem #wrapper:

Code:

#wrapper {
    background-image: url("../../files/mywebsite/content/grafiken/hintergrund.png");
}

Der erscheint, weil du dem #header eine fixe Höhe gegeben hast, und der Inhalt des #header aber proportional verkleinert wird. Das hast du wahrscheinlich gemacht um die paar Pixel Abstand zwischen #header und #container wegzubekommen, aber das ist natürlich kein guter Weg. Der Abstand resultiert daraus, dass das <img> ein inline Element ist. Wenn du also

Code:

#header .logo img {
    display:block;
}

einfügst, kannst du

Code:

#header {
    height:100px;
}

entfernen.

Danach bleibt in der Smartphone Ansicht aber immer noch ein Abstand zwischen #header und #container. Der resultiert im Endeffekt aus diesem Margin:

Code:

#main .inside {
    margin-top: 1em;
}

Wegen margin-collapse. Um den margin-collapse wegzubekommen, könntest du folgendes verwenden:

Code:

#main:before,
#main:after {
    content:"";
    display:table;
}

**wigraf** · 19.08.2016, 09:36

Danke Spooky für diese prompte Antwort. Diese Vorschläge werde ich demnächst umsetzen.
Nochmals, danke.

**wigraf** · 19.08.2016, 10:04

Hallo Spooky,
Deine Vorschläge habe ich in meine Website eingebaut und es ist alles OK. Nur den letzten Vorschlag habe ich nicht verstanden und daher das margin-top: 1em; aus #main .inside herausgenommen, dafür dann padding-top: 1em; eingesetzt.
Mein Problem ist damit gelöst.
Nochmals herzlichen Dank für diese schnelle Hilfe,
Wilhelm Graffenberger (wigraf)