© Bakual

variable Headerhöhe und Logogröße

Mehr
1 Monat 1 Woche her - 1 Monat 1 Woche her #5295 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

 
Letzte Änderung: 1 Monat 1 Woche her von Jochen Ebert.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 1 Woche her #5296 von Thomas Hunziker
Fürs Logo gibt es ne eigene ID die du in deiner CSS Regel als Ziel definieren kannst.
Code:
#logo
ist das umgebende "DIV". Das Bild selber dann mittels
Code:
#logo img
Damit solltest eigentlich recht viel machen können.
Folgende Benutzer bedankten sich: Jochen Ebert

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 1 Woche her #5297 von Jochen Ebert
Habe es nun schon ein wenig hinbekommen.
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); }
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.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.281 Sekunden