Ich würde folgende CSS-Regel hinzufügen:
.site-header img {
width: 100%;
max-width: 400px;
}
Um das Logo auf kleineren Displays komplett auszublenden, müsstest du eine Media-Query verwenden.
@media (max-width: 700px) {
.site-header {
display: none;
}
Allerdings wird der Site-Header dann trotzdem ins Smartphone geladen, nur eben nicht angezeigt.
Thread-Starter
akrele
(@akrele)
Hallo Bego,
wenn ich die zweite Variante verwende, wird auch kein Menü mehr eingeblendet.
Kann man das ändern?
Welche Variante würdest du aufgrund der Benutzerfreundlichkeit vorziehen?
Hi. Bego hat da bestimmt nur etwas vergessen in dem Code.
Ergänze lediglich das img, um nur das Bild auszublenden:
@media (max-width: 700px) {
.site-header img {
display: none;
}
}
-
Diese Antwort wurde geändert vor 6 Jahre, 9 Monaten von
espiat.
Thread-Starter
akrele
(@akrele)
Hi,
hat funktioniert danke!
Gibt es denn auch eine „Zwischenlösung“ der beiden oben genannten Möglichkeiten?
Bei der ersten Option sieht die Desktop Version danach nicht mehr sehr schön aus, weil alles zu klein ist.
Bei der zweiten Option bleibt die Desktop Version unverändert, dafür hab ich auf der Mobile Version kein Logo mehr.
Kann man hier nicht auch eine entweder oder Regel anwenden? Wie würde das aussehen?
Danke schonmal
Hallo.
Die Lösungen sind lediglich Lösungsansätze unsererseits.
Das Hauptproblem ist, dass du nicht weisst, was der Code bedeutet.
Zur Erklärung:
@media (max-width: 700px) {
.site-header img {
display: none;
}
}
bedeutet zB, dass der CSS-Code nur unter 700px Displaybreite angezeigt wird.
Wenn du uns ganz konkret sagst, was du willst, dann könnten wir dir helfen.
Thread-Starter
akrele
(@akrele)
Danke für die schnelle Hilfe.
Wenn ich folgenden Code verwende:
.site-header img {
width: 100%;
max-width: 400px;
}
schaut die Homepage auf mobilen Geräten am besten aus. Leider wird dann auch die Desktop Variante anders dargestellt, weshalb ich diesen Code bisher nicht verwendet habe, sondern die zweite von Bego angeführte Variante.
Ideal wäre es deshalb, wenn dieser Code nur dann zur Anwendung kommt, wenn mobile Geräte verwendet werden, und die Homepage auf Desktop Computern unverändert aussieht.
Wenn die Homepage über normale PCs abgerufen wird, soll nichts verändert werden, wenn sie übers Handy aufgerufen wird, sollte wenn möglich der Header in der Größe angepasst werden, wenn es geht OHNE das das Logo ausgeblendet wird.
Geht das auch über ein Media-Query?
Ich hoffe ich habe es halbwegs verständlich ausgedrückt 😉
Die leichteste Variante ist über CSS – Media Queries.
Damit sagst du, dass alles unter 700px Anzeigebereich mit dem folgenden Code dargestellt wird. Die Desktopvariante ist dabei unverändert.
@media (max-width: 700px) {
.site-header img {
width: 100%;
max-width: 400px;
}
}
Du kannst zwar eine Unterscheidung zwischen Mobil und Desktop machen oder sogar per PHP mit is_mobile , aber bei deinen Kenntnissen sollte der „einfache“ CSS Code ausreichen.
Mehr Infos:
– https://wiki.selfhtml.org/wiki/CSS/Media_Queries#.C3.9Cbersicht_der_Medientypen
– https://blog.kulturbanause.de/2014/07/responsive-webdesign-breakpoints-und-media-queries/
Thread-Starter
akrele
(@akrele)
Danke, das war genau was ich brauche!
