HTML: Text auf Smartphone zu groß

  • Hallo,


    was kann Ich machen, wenn der Text auf dem Mobilen Gerät (Smartphone im Hochformat) zu groß wiedergegeben wird? Der Text nimmt die ganze Seite ein, responsives Design Viewport habe Ich bereits im Code drinnen.

    Ich möchte nur den Text auf Mobilgeräten im Hochformat kleiner machen, geht das?



    Grüße

  • Du müsstest ihn in dem Fall über eine media-query verkleinern.

    In welcher Einheit gibst du deine font-size an?


    In px

    Ich habe den Code rausgesucht, der für dieses Element verantwortlich ist:

    Code
    <div class="inner">
                  <h1>Unser Ziel ist <em>die Mitgliedschaft</em></h1>
                  <p>Wir machen das!</p>
                  <p>Schauen Sie sich unsere Ziele an.</p>
                    <div class="scroll-icon">
                        <a class="scrollTo" data-scrollTo="portfolio" href="#"><img src="img/scroll-icon.png" alt=""></a>
                    </div>    
                </div>

    In der CSS Datei wird h1 so definiert:

    Code
    #video-container .video-content .inner h1 {
      font-size: 64px;
      text-transform: uppercase;
      color: #fff;
      letter-spacing: 2px;
      font-weight: 500;
      text-align: center;
    }


    Wie müsste ich da jetzt den media query anwenden?


    Grüße

  • Hier Bitteschön. Bitte beachte aber, es gilt immer das Prinzip Mobile-First. Sprich als erstes Mobile optimieren dann Desktop etc.

    Media Query für Blank CSS Referenz hier: https://www.w3schools.com/css/css_rwd_mediaqueries.asp


    Dein Code für "Mobile" hier:



    Die wichtigsten Breakpoints sind:

    • 640px
    • 768px
    • 1024px
    • 1280px
    • 1536px
  • Erklärst du mir bzw uns bitte noch, warum Mobile-First ? IdR erstelle ich erst die Desktop Version und passe es dann mobil an. Alles andere macht doch gar keinen Sinn, oder programmiert du hauptsächlich am Smartphone ?

  • Erklärst du mir bzw uns bitte noch, warum Mobile-First ? IdR erstelle ich erst die Desktop Version und passe es dann mobil an. Alles andere macht doch gar keinen Sinn, oder programmiert du hauptsächlich am Smartphone ?

    Achso ja klar gerne.

    Ich beziehe mich da gerade auf Websiten /-Apps. Der Großteil der Bevölkerung (Status: Wachsend) konsumiert das Internet über den Browser am Smartphone. Eine Seite die nicht mobil optimiert ist, wird auch nicht gern besucht und Google (sowie andere Suchmaschinen) ranken die Website dann schlechter.

    Der wichtigste Punkt jedoch ist die Render Zeit auf mobilen Endgeräten bzw. die Datenübertragung. Sprich wenn eine CSS geladen wird werden die Elemente dem Stil angepasst wie in der CSS vorgegeben, stecken aber in den CSS Regeln bzw. Media-Queries drin die auf Mobile bezogen sind, müssen diese ausgetauscht werden dass Zeit kostet, was nicht der Fall ist wenn man nach dem Prinzip "Mobile First" agiert.

    Ist das verständlich wie ich den letzten Satz ausgedrückt hab? Bin mir grad nicht sicher :D

    Kurz gesagt Page-Load am Smartphone ist wesentlich schneller und ist ein wesentlicher Bestandteil in der SEO Thematik.


    #edit

    Wenn du zuerst für die Desktop Version entwickelst, ist das gar kein Problem (mach ich auch). ES geht darum das in der CSS an erster Stelle dann der Stil für das Smartphone steht und im Media Query dann für für größere Endgeräte mit mehr Leistung.

  • Es hat so halb funktioniert. So wie oben beschrieben hat sich irgendwie der Text bei allen Bildschirmen verkleinert.


    So hat es jetzt funktioniert, aber jetzt ist auf Mobilgeräten die Großschreibung nicht umgesetzt.=O

    Ich weiß nicht warum, ich weiß nicht mal, ob das so komplett richtig ist.


    Grüße

  • Könnte so funktionieren.

    Du brauchst nicht für jede media querry alles neu stylen. Es reicht aus, innerhalb des @media Änderungen zu deklarieren

    graphics frontend web