Html Anker

[Andrin.Spitzer]

Leider ist das bei der Schriftgröße nicht so einfach wie bei einem Container, wo man die Größe z. B. in % angeben kann. AFAIK geht es nur so, dass man mit Mediaqueries die Größe stufenweise umschaltet.

Könntest du mir das demonstrieren fiddle oder so?

 

[Andrin.Spitzer]

Habt ihr an sowas gedacht?

h1 {font-size: 5em;}

            @media screen and (max-width: 64em) {
                h1 {
                    font-size: 2.5em;
                    }
            }

            @media screen and (max-width: 50em) {
                h1 {
                    font-size: 2em;
                    }
            }

            @media screen and (max-width: 30em){
                h1 {
                    font-sitze: 1.5em;
                    }
            }

Habe den Code mal angepasst und hochgeladen, schaut es euch an.


Ich habe festgestellt das der div nie mittig der website ist wie könnte ich das lösen?

 

[Sempervivum]

Ja, genau so habe ich es gemeint. Wo hast Du es denn hochgeladen, ich sehe da nur den Link für jsfiddle?

 

[Jan-Frederik Stieler]

So als kleinen Tip vw oder vh kann auch für Schriftgrößen verwendet werden.

 

[Andrin.Spitzer]

Ja, genau so habe ich es gemeint. Wo hast Du es denn hochgeladen, ich sehe da nur den Link für jsfiddle?

Schau hier
https://firmenmeisterschaft-sh.ch/

 

[Sempervivum]

Jaaa, so sieht es wesentlich besser aus! Keine horizontalen Scrollbars mehr bei schmalerem Viewport.

 

[Andrin.Spitzer]

Jaaa, so sieht es wesentlich besser aus! Keine horizontalen Scrollbars mehr bei schmalerem Viewport.

Könntest du die seite mal auf deinem smartphone anschauen und mir sagen ob bei dir die seite auch fehler haft dargestelt wird?

 

[Sempervivum]

Nein, auf meinem Smartphone sieht die Seite OK aus. Nur die Schrift in der Nav und der zweiten Box ist etwas klein.
Am besten erst Mal dieses im Head einfügen, sonst machen die mobilen Browser mit der Seite was sie wollen:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

[Andrin.Spitzer]

Funktioniert Sehr gut danke. ich hätte jedoch noch eine frage. meine nav ändert beim runter scrollen die Hintergrundfarbe jedoch wen ich ganz oben ankomme bleibt es noch kurz schwarz kann ich das ändern das es wirklich wider transparent ist wen ich oben bin?