Du müsstest ihn in dem Fall über eine media-query verkleinern.
In welcher Einheit gibst du deine font-size an?
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:
<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:
#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:
#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;
}Die wichtigsten Breakpoints sind:
Alles anzeigenHier 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:
CodeAlles anzeigen#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; }
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 
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.
#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;
}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
#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;
}
}Könnte so funktionieren.
Du brauchst nicht für jede media querry alles neu stylen. Es reicht aus, innerhalb des @media Änderungen zu deklarieren
