HTML: Text auf Smartphone zu groß

Indec · 6. April 2021

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

**Maximilian** · 6. April 2021

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

In welcher Einheit gibst du deine font-size an?

Indec · 12. April 2021

Zitat von Maximilian

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

[DT]Nightstr3am · 12. April 2021

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:

Code

#video-container .video-content .inner h1 {
  font-size: 32px;
  @media only screen and (max-width: 768px){
    font-size: 64px;
  }
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
}

Alles anzeigen

Die wichtigsten Breakpoints sind:

640px
768px
1024px
1280px
1536px

**Maximilian** · 12. April 2021

https://www.w3schools.com/howt…%20%22viewport%20width%22.

Canna · 12. April 2021

Zitat von [DT]Nightstr3am
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:
Code
#video-container .video-content .inner h1 {
  font-size: 32px;
  @media only screen and (max-width: 768px){
    font-size: 64px;
  }
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
}
Alles anzeigen
Die wichtigsten Breakpoints sind:
640px
768px
1024px
1280px
1536px
Alles anzeigen

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 ?

[DT]Nightstr3am · 12. April 2021

Zitat von Canna

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

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.

Indec · 19. April 2021

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

Code

#video-container .video-content .inner h1 {
  font-size: 64px;
  @media only screen and (max-width: 600px) {
  font-size 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
  }
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
  
}

Alles anzeigen

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

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

Grüße

**Maximilian** · 19. April 2021

Code

#video-container .video-content .inner h1 {
  font-size: 64px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
  @media only screen and (max-width: 600px) {
      font-size 32px;
  } 
}

Alles anzeigen

Könnte so funktionieren.

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

breadfish.de 12. März 2022