Beitragstitel dynamisch anpassen (Mobile/Smartphone)

Hallo,

das richtige Stichwort für dich sollte sein:

font-size: clamp

Anwendungsbeispiele gibt es u.a. hier und hier.

Zitat von wolfstar

Code

font-size: clamp

Wieder was gelernt! Danke

Weitere Infos gibts unter https://wiki.selfhtml.org/wiki/CSS/Funktionen/clamp() .

Zitat von dakobert

Danke für die schnelle Antwort! In welche .css packe ich das? template.css oder custom.css? In diesen Bereichen kenne ich mich leider kaum aus. Und suche ich dann nach einem bestehenden Eintrag oder füge ich neue Zeilen ein? Das geht m.M. aus den Anwendungsbeispielen nicht hervor.

Im Idealfall in deine custom.css wenn die schon exististiert.

Ich habe es an verschiedenen Stellen in meiner custom.css für Helix Ultimate:

Zitat

/* Style setzen Beginn */

body {

font-family: 'Open Sans';

font-size: clamp(14px, 2vw, 16px);

}

h1 {

font-family: 'Open Sans';

font-size: clamp(20px, 2vw, 32px);

}

h2 {

font-family: 'Open Sans';

font-size: clamp(18px, 2vw, 28px)

}

h3 {

font-family: 'Open Sans';

font-size: clamp(16px, 2vw, 24px);

}

h4 {

font-family: 'Open Sans';

font-size: clamp(16px, 2vw, 20px);

}

h5 {

font-family: 'Open Sans';

font-size: clamp(14px, 2vw, 16px);

}

h6 {

font-family: 'Open Sans';

font-size: clamp(14px, 2vw, 16px);

}

/* Style setzen Ende */

Alles anzeigen

/* Module allgemein */
.sp-module .sp-module-title {
    font-size: clamp(18px, 2vw, 24px)!important;
}

/* Newsblog "Aktuelles" Einleitungsbeiträge Beginn */
.article-list .article .article-header h2 {font-size: clamp(20px, 2vw, 28px);}
/* Newsblog "Aktuelles" Einleitungsbeiträge Ende */

#sp-produktkategorien .sp-module .sp-module-title {
    font-size: clamp(12px, 2vw, 16px)!important;
}

Das sind aber nur Beispiele wie sie für mein Helix greifen, das kann bei dir ganz anders aussehen, je nach Template.

Eigene CSS-Anweisungen solltest Du immer in die custom.css (oder user.css, je nach Template) eintragen. Die template.css wird bei einem Update des Templates überschrieben, die custom.css nicht. Und da die custom.css nach der template.css geladen wird, kannst Du in der custom.css Werte aus der template.css überschreiben.

Zitat von dakobert

Hi wolfstar,

ich habe zwar eine custom.css, da stehen aber nur drei Einträge zum Thema "hover" drin, die ich mal ergänzen musste. Die Einträge, die du vorschlägst, finde ich in der template.css. Frage ist jetzt, ob ich die anfassen soll/darf?

Ich muss aber schon für jeden Eintrag zum Thema font-size den clamp-Zusatz einfügen? Gibt es keine Möglichkeit, dass das Global geregelt wird?

Mit einem Link zur Seite wäre es einfacher zu helfen, so kann man nur raten.

Schau am besten mit den Entwicklerwerkzeugen (Firefox-rechtsklick-untersuchen) den Bereich an den du ändern möchtest, dann siehst du welche Klasse dort angesprochen wird und kannst diese dann direkt so ändern bis das Ergebnis passt. Diese Anweisung muss dann in der custom.css hinzugefügt werden.

Gib mal folgendes in deine custom.css:

h3 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(10px, 2vw, 34px);
  font-weight: normal;
}

Dies hat aber Einfluss auf alle h3-Überschriften...

Die Werte können natürlich auch noch angepasst werden (10px, 2vw, 34px)

Hallo,

Also der Code von wolfstar funktioniert tadellos. Hast ja schon eingegeben.

Allerdings (leider) nur mit einem !important;

h3 {
    font-family: Montserrat, sans-serif;
    font-size: clamp(14px, 2vw, 34px) !important;
    font-weight: normal;
}

In der Zeile 18 (in Deiner custom.css) fehlt dann noch die abschließende Klammer }

Liebe Grüße

Christine

Zitat von dakobert

Auf das mit dem "important" wäre ich nie gekommen. Hast recht, das muss dazu, sonst ändert sich nichts.

Ja, leider in diesem Fall. Weil es ein Inline Segment für die h3 mit 34px gibt. Welches nun durch obige 14px "überschrieben" wird. Das findest Du sicher auch, ist jetzt durchgestrichen.

Grundsätzlich sollte man mit !important sparsam umgehen.

Die font-family hätte man weglassen können, weil es diese im Inline Segment schon gibt.

Hier was zu beknuspern: https://www.w3schools.com/css/css_important.asp

Liebe Grüße
Christine

Mit clamp habe ich auch schon mal gesehen, aber noch nicht verwendet.

Ich habe stattdessen folgendes im Einsatz als Beispiel:
font-size: calc(18px + 10 * ((100vw - 400px) / 800)) !important;

Bei einer Bildschirmbreite von 1600 ergibt das eine Größe von 33px. Bei Bildschirmbreite von 640px ergibt das eine Schriftgröße von 21px.

Hallo Peer,

interessant. Also clamp kannte ich nicht, kenne nur Klempner

Diese 18px +10 * .... ein Spürchen zu groß? Liegt sicher an meiner Bildschirmbreite.

Ab ca. 770px (mobile) tät es bei mir passen.

Kann ja TE ausprobieren.

Liebe Grüße

Christine

Hallo Christine,

beim 2. Link von #2 ist es in ähnlicher Form ganz unten beschrieben. Auf Grund der Calc-Funktion kann man auch selbst nachberechnen, welche Schriftgröße bei welcher Breite verwendet wird. Wenn 10*... zu groß ist, kann man das auch heruntersetzen oder die Ausgangsgröße von 18px auf 14px runter setzen. Die 100vw sind ja gleich der Bildschirmbreite - alles andere ist einfache Mathematik.

Das clamp werde ich aber auch mal ausprobieren.

Zitat von LukasHH

- alles andere ist einfache Mathematik.

Ja klar, um mit Joomla zu beginnen oder verwenden zu können, muss man mind. ein Studium der Algebra absolviert haben.

Liebe Grüße

Christine

Zitat von dakobert

Auf das mit dem "important" wäre ich nie gekommen. Hast recht, das muss dazu, sonst ändert sich nichts.

weil sogenannter "Inline-CSS-Code" auf der Website vorhanden ist.

Siehe diesbezüglich z.B. die Zeile 39 im Seitenquelltext von alfpaka.de :

<style>
h3{
font-family:Montserrat, sans-serif;
font-size:34px; 
font-weight:normal; 
}
</style>

und derlei CSS hat die höchste Spezifität.

Zitat

...Regeln innerhalb von style-Attributen können nur durch die Verwendung von !important überschrieben werden...

aus:

wiki.selfhtml.org/wiki/Spezifit%C3%A4t