Hallo,
weil ich den Beitrag versehentlich in der falschen Rubrik gespeichert hatte, hier noch mal in der richtigen:
Ich arbeite gerade daran, meine Homepage responsiv zu machen: www.robert-runkel.de.
Ich benutze ein selbst erstelltes Template, das bis dato nicht responsivist. Ich habe, wie in den diversen Anleitungen zu finden ist, Bootstrap eingebunden und die Klassen angepasst. Das funktioniert auch leidlich, aber ein Detail kriege ich gar nicht in den Griff und ich verstehe nicht, warum das so ist.
Wenn ich versuche, den Header responsiv zu machen, wird er überhaupt nicht mehr angezeigt.
CSS der nicht responsiven Version:
#header {
margin-right: auto;
margin-left: auto;
width: 960px;
height: 242px;
background: transparent;
background-image: url('../../../templates/robert/images/header_oben.png');
position:relative;
}
Druch die fest angegebene Breite und Höhe wird der Header auf Geräten mit kleinerem Bildschirm nicht angepasst. Sobald ich aber als Breite "100%" und als Höhe "auto" angebe, verschwindet er völlig. Ich habe es auch mit "background-size: auto" oder "background-size: contain" probiert. Immer wird der Header komplett ausgeblendet.
Ist das eventuell ein joomla-spezifisches Problem? Oder hängt es schlichtweg an fehlerhaften Styles?
Ich bin dankbar für Tipps.