variable Headerhöhe und Logogröße
- Jochen Ebert
- Autor
- Offline
- Premium Mitglied
-
Weniger
Mehr
- Dank erhalten: 3
1 Monat 1 Woche her - 1 Monat 1 Woche her #5295
von Jochen Ebert
variable Headerhöhe und Logogröße wurde erstellt von Jochen Ebert
Hallo,
ich suche mir gersade einen Wolf im Allrounder nach
- variabel Höhe für den Header in Abhängigkeit zum header-hintergrund (mobile Ansicht)
- variable Größe des Logobild bei der mobilen Ansicht
Die Schriftgröße konnte ich per clamp an die Bildschirmbreite anpassen
www.mfc-saturn.de
Das selbe würde ich nun noch versuchen bei der Headerhöhe und dem Logobild zu erreichen.
Ich finde ja noch nicht einmal, wo die Logogröße definiert ist.
Ich habe die Hoffnung, das ich ähnlich oder sogar mit clamp, das Logobild entsprechend für die mobil Ansicht kleiner bekomme.
Bei der Headerhöhe (die ist im Moment auf 180px fest), wird es bestimmt nicht so schwierig sein. Das Headerhintergrundbild wird durch die feste Höhe natürlich im Moment nicht in der Höhe skaliert. Da probiere ich noch.
Beim Logo allerdings stehe ich vor einem Rätsel.
Die Definition dafür finde ich einfach nicht.
Danke für einen Denkanstoss.
Danke
ich suche mir gersade einen Wolf im Allrounder nach
- variabel Höhe für den Header in Abhängigkeit zum header-hintergrund (mobile Ansicht)
- variable Größe des Logobild bei der mobilen Ansicht
Die Schriftgröße konnte ich per clamp an die Bildschirmbreite anpassen
www.mfc-saturn.de
Das selbe würde ich nun noch versuchen bei der Headerhöhe und dem Logobild zu erreichen.
Ich finde ja noch nicht einmal, wo die Logogröße definiert ist.
Ich habe die Hoffnung, das ich ähnlich oder sogar mit clamp, das Logobild entsprechend für die mobil Ansicht kleiner bekomme.
Bei der Headerhöhe (die ist im Moment auf 180px fest), wird es bestimmt nicht so schwierig sein. Das Headerhintergrundbild wird durch die feste Höhe natürlich im Moment nicht in der Höhe skaliert. Da probiere ich noch.
Beim Logo allerdings stehe ich vor einem Rätsel.
Die Definition dafür finde ich einfach nicht.
Danke für einen Denkanstoss.
Danke
Letzte Änderung: 1 Monat 1 Woche her von Jochen Ebert.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Thomas Hunziker
-
- Offline
- Administrator
-
1 Monat 1 Woche her #5296
von Thomas Hunziker
Thomas Hunziker antwortete auf variable Headerhöhe und Logogröße
Fürs Logo gibt es ne eigene ID die du in deiner CSS Regel als Ziel definieren kannst.
ist das umgebende "DIV". Das Bild selber dann mittels
Damit solltest eigentlich recht viel machen können.
Code:
#logo
Code:
#logo img
Folgende Benutzer bedankten sich: Jochen Ebert
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- Jochen Ebert
- Autor
- Offline
- Premium Mitglied
-
Weniger
Mehr
- Dank erhalten: 3
1 Monat 1 Woche her #5297
von Jochen Ebert
Jochen Ebert antwortete auf variable Headerhöhe und Logogröße
Habe es nun schon ein wenig hinbekommen.
Mit den Werten muss ich noch ein wenig spielen, damit alles ein wenig flüssiger aussieht. Aber vom Grundsatz her klappt es schon mal.
Am Handy sieht es nun schon viel besser aus.
Code:
/* Schriftgröße HEADER "logo" und "slogan" automatisch anpassen */
#logo a.logo {
font-size: clamp(12px, 6vw, 46px);
}
div.slogan {
font-size: clamp(14px, 3vw, 18px);
}
/* Headerhöhe automatisch anpassen*/
#header {
min-height: clamp(80px, 30vw, 180px);
}
/* Headerlogo nach rechts */
#logo {
margin-left: 10px;
}
/* Logo Größe automatisch anpassen */
#logo img, svg {
width: clamp(70px, 17vw, 130px);
}
a.imglogo, a.medialogo{
width: clamp(75px, 20vw, 140px);
}
Am Handy sieht es nun schon viel besser aus.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
Ladezeit der Seite: 0.281 Sekunden