dare: Website responsive machen Fehler

Hallo,

ich brauche eure Hilfe. Folgendes Problem.

Meine Website ist responsive bis auf die Überschrift, wenn Sie zu viele Zeichen hat. An den Bildern kann man es am besten erkennen.

index.html


	<body class="landing">

		<!-- Page Wrapper -->
			<div id="page-wrapper">

				<!-- Header -->
					<header id="header" class="alt">

   					h1><a href="index.html">Wenn diese Überschrift zu lang ist wird sie auf mobilen Geräten abgeschnitten</a></h1> 

....

					
	</body>
</html>
<!-- Localized -->

die ccs datei ist leider zu groß deshalb hier zum Download:

https://www.mediafire.com/file/rj334usb5lzp1g8/main.css/file

Ich hoffe ihr könnt mir helfen.

  1. Hallo dare,

    ein Link zur Seite wäre sinnvoll. Dann kann man sich mit den Entwicklertools anschauen.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. kleinerwaffenschein.eu

    2. verkleinern wär am besten denke ich

      1. Servus!

        verkleinern wär am besten denke ich

        Ich gehe da mit @Henry der eher eine kürzere h2 bevorzugt. Auf einem Handy würde die Überschrift kleinerwaffenschein.eu auf 20em Breite sehr klein aussehen und nicht

        • lesbar
        • als Überschrift erkennbar sein.

        Was Hältst Du von "kleiner Waffenschein?"

        BTW: Dein HTML und CSS enthält viele Elemente, die nicht benötigt werden:

        #banner h2 {
        
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -moz-transition: -moz-transform .5s ease,opacity .5s ease;
            -webkit-transition: -webkit-transform .5s ease,opacity .5s ease;
            -ms-transition: -ms-transform .5s ease,opacity .5s ease;
            transition: transform .5s ease,opacity .5s ease;
            display: inline-block;
            font-size: 1.75em;
            opacity: 1;
            padding: .35em 1em;
            position: relative;
            z-index: 1;
        }
        

        Das ist das gleiche wie:

        #banner h2 {
            transition: transform .5s ease,opacity .5s ease;
            padding: .35em 1em;
        }
        

        Das div.inner im banner ist auch nicht nötig!

        Herzliche Grüße

        Matthias Scharwies

        --
        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      2. Hallo dare0,

        verkleinern wär am besten denke ich

        wie ich schon schrieb, besser keine lange Wörter. Aber du kannst natürlich ein wenig mit vh,vw,vmin, usw. und den Calc-Optionen experimentieren ob dir irgendein Wert dabei zusagt.

        zb.

        font-size: calc(2vh + 4vw);
        

        Gruss
        Henry

        --
        Meine Meinung zu DSGVO & Co:
        „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
        1. @@Henry

          font-size: calc(2vh + 4vw);
          

          Nein, so kann die Schrift unleserlich klein werden.

          In die Berechnung gehört eine Angabe in em oder rem oder px.

          Sowas wie bspw. calc(0.8rem + 4vw)

          LLAP 🖖

          --
          Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
          1. Hallo

            font-size: calc(2vh + 4vw);
            

            Nein, so kann die Schrift unleserlich klein werden.

            In die Berechnung gehört eine Angabe in em oder rem oder px.

            Sowas wie bspw. calc(0.8rem + 4vw)

            Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft min-font-size. 😉

            font-size: calc(2vh + 4vw);
            min-font-size: 0.8rem; /* * */
            

            Tschö, Auge

            * Nein, das gibt's „in echt“ nicht.

            --
            Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
            Hohle Köpfe von Terry Pratchett
            1. @@Auge

              Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft min-font-size. 😉

              font-size: calc(2vh + 4vw);
              min-font-size: 0.8rem; /* * */
              

              Tschö, Auge

              * Nein, das gibt's „in echt“ nicht.

              Doch, aber anders:

              font-size: max(calc(2vh + 4vw), 0.8rem);
              

              Und bislang nur in WebKits und Chromia. ☞ MDN

              LLAP 🖖

              --
              Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
              1. Hallo

                Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft min-font-size. 😉

                font-size: calc(2vh + 4vw);
                min-font-size: 0.8rem; /* * */
                

                * Nein, das gibt's „in echt“ nicht.

                Doch, aber anders:

                Also nicht so, wie ich es notiert habe. Die Fußnote war ja dazu da, späteren Lesern ein „Mach' das nicht so!“ nachzurufen.

                font-size: max(calc(2vh + 4vw), 0.8rem);
                

                Und bislang nur in WebKits und Chromia. ☞ MDN

                Hmm, sieht zusammen mit min und clamp sehr interessant aus. Ich weiß ja nicht, welchen Versionsrhythmus MS mit Edge [1] einhalten will, aber wenn das auch eine neue Version alle paar Monate wird, wird bald nur noch Firefox als dazu unfähiger Browser übrig bleiben. 😕

                Tschö, Auge

                --
                Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                Hohle Köpfe von Terry Pratchett

                1. Weil ich es vor kurzem ansprach, ich habe den Chromium-basierten Edge immer noch nicht. ↩︎

                1. @@Auge

                  Hmm, sieht zusammen mit min und clamp sehr interessant aus.

                  Ja, clamp() ist hier wohl angesagt. Man will ja auch nicht, dass die Schrift auf großen Bildschirmen riesig groß wird.

                  Der aktuelle Edge 80 kann’s schon … ☞ Codepen

                  Ich weiß ja nicht, welchen Versionsrhythmus MS mit Edge [^1] einhalten will, aber wenn das auch eine neue Version alle paar Monate wird,

                  … wohl nicht das Problem des Versionsrhythmus von Edge, sondern des Auslieferns über Windows.

                  wird bald nur noch Firefox als dazu unfähiger Browser übrig bleiben. 😕

                  74.0b2 (Developer Edition) macht’s noch nicht.

                  LLAP 🖖

                  --
                  Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
                  1. Wenn ich den Code hinzufüge klappt es leider immer noch nicht 😕

  2. Hallo dare,

    was soll denn passieren, wenn die Überschrift so lang wird? Verkleinern, umbrechen oder was genau?

    Deshalb nimmt man möglichst keine extem langen Wörter, wirds zu klein ist es schwer zu lesen, wird es umgebrochen meist auch nicht schön, bleibt es lang horizontale scrollen, also alles nicht schön, daher vermeide lange Wörter.

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
  3. Hallo dare,

    vielleicht hilft manuelle Silbentrennung und der Einsatz von &shy;

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo,

      der Einsatz von &shy;

      verhackstückt das so getrennte Wort auch bei Google.

      Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.

      1. Hallo meltemi,

        der Einsatz von &shy;

        verhackstückt das so getrennte Wort auch bei Google.

        Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.

        Aha. Kannst du das auch belegen?

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. Hallo Matthias,

          der Einsatz von &shy;

          verhackstückt das so getrennte Wort auch bei Google.

          Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.

          Aha. Kannst du das auch belegen?

          Ich hab' das mal getestet, ist allerdings schon eine Weile her. Nur selber testen macht schlau.

          Einen Google-Hilfetext, den Du schwarz auf weiß nachhause tragen könntest, gibt es meines Wissens nicht.

          Im Zweifelsfall teste das selbst, kostet doch nur ein bißchen Zeit. Suche bei Google nach einem verhackstückten Wort auf einer neu angelegten Seite, sobald indexiert. Für den Test darf das Wort natürlich kein einziges Mal ohne bedingtes Trennzeichen vorkommen, weder im Titel-Element noch in Überschriften noch im Text noch in Bild-Dateinamen noch in alt-Attributen. Hab' ich was vergessen? Das Wort ohne bedingtes Trennzeichen darf auch in keinem eingehenden Link zur Test-Seite enthalten sein ...

          P.S. Vor zwei Monaten meldete jemand, der seine Seite mit bedingten Trennzeichen vollgepflastert hatte, im Google-Webmasterforum, daß im Google "Search Console"-"Live-Test" im HTML-Bereich statt der &shy; lauter rote Punkte angezeigt werden.