Hallo Zusammen,
ich habe ein Problem im Zusammenhang mit der Darstellung bei kleinen Displays:
Meine Hintergrundgrafik im Header "banner.jpg" hat - anders als im Template - die volle Layoutbreite (1000 px). Das Logo ist im Bild integriert. Am iPhone ist das Bild - und damit auch das Logo - komplett weg, nur das Suchfeld mit Suchbutton wird ganz unten am Footer angezeigt. Ich würde die Suchfunktion aber lieber weiter oben haben und das Bild lieber rechts angeschnitten als überhaupt nicht zu sehen. Alternativ könnte das Bild auch entfernt werden, wenn dafür das Logo alleine erscheinen würde. Dieses könnte ich dafür leicht in passender Größe erstellen.
Wie kann ich mein Problem lösen?
hier die Seite: http://www.ssvc-rimsting.de (http://www.ssvc-rimsting.de)
Danke im Voraus für euer Interesse und eure Mithilfe!
Toni
Hallo Toni,
hast du mal das Template grumme_2 von Thorsten probiert?
Bei mir, auf der bemerkenswelt (http://bemerkenswelt.de), funktioniert das mit dem Headerbild wunderbar.
Und Dein Layout ist aufgebaut wie meins. Sieht also so aus, als wenn grumme 2 ganz gut dazu passt.
Guten Morgen bemerkenswelt!
Danke für den Tipp! Am besten gefällt mir, dass dein Bannerfoto proportional mit der Displaygröße größer oder kleiner wird. Ich werde mir das Template genauer anschauen, sobald ich dazu komme.
Toni
Hallo,
die div ID Banner wird bei diesem Template per CSS per media queries ausgeblendet:
@media (max-width: 610px)
#banner {
display: none;
}
Wenn du den Teil in der CSS (style_mobile.css Zeile 53) entfernst, wird es auch bei kleineren Bildschirmen angezeigt.
Hallo marusti,
habe deine Empfehlung gleich mal umgesetzt. Sicherheitshalber löschte ich die Displayzeile nicht ganz, sondern machte aus dem "none" ein "true". Vom Ergebnis bin ich begeistert, weil es mir viel Bastelei erspart. Herzlichen Dank für deine Unterstützung!
Übrigens: hier ist die URL: http://www.ssvc-rimsting.de (http://www.ssvc-rimsting.de)
Toni
Das freut mich das es klappt.
Allerdings ist "true" keine gültige CSS Anweisung. Wenn du es nicht löschen möchtest, kommentiere es besser aus
/*
@media (max-width: 610px)
#banner {
display: none;
}*/
... und ich war schon ganz stolz, nicht "yes", sondern "true" gewusst zu haben. Aber ich habe deine Korrektur gerne ausgeführt! Danke, marusti