Die Größe Desktop-Logo und Smartphone-Logo ist voneinander unabhängig, da du im Code die maximale Pixelgröße des Bildschirm angibst:
#sqrheadertopbox img {
display: block;
height: 120px;
width: auto;
}
@media screen and (max-width: 767px) {
#sqrheadertopbox h1 {
font-size: 32px;
}
#sqrheadertopbox img {
height: 90px;
width: auto;
}
}
Was über "@media screen and (max-width: 767px)" steht ist der Desktop und was darunter steht ist Smartphone oder Tablet. Hier habe ich jetzt 120px für Desktop definiert und 90px für Smartphone/Tablet.
Das Headerbild (Eyecatcher, Video) wird mit "width" und "height" beim folgenden Code angegeben (hier orginal mit jeweils 100%), du kannst aber auch px oder auto angeben:
header #headercontainer img, header #headercontainer video {
width: 100%;
display: block;
border: 0;
position: absolute;
height: 100%;
}
Beispiel-Änderung:
header #headercontainer img, header #headercontainer video {
width: 100%;
display: block;
border: 0;
position: absolute;
height: auto;
}
Dieser Code wirkt sich auf alle Displays aus, da diese nicht mit "@media screen and (max-width: 767px)" für Smartphone/Tablet angegeben wurde.
Mehr kann ich nicht helfen, da ich das Design nicht habe. Eventuell kann Dir jemand helfen, der auch dieses Design verwendet.
Mit freundlichen Grüßen
Thomas
Web To Date seit 2004, Siquando Web 12, Pro Web 9, Web Client