#1

deckewandboden

Mitglied  (36 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

Ich möchte die Schriftgröße im Absatz gerne Dynamisch / Responsive machen

Hallo liebe Siquando´s

 

Hier meine Seite wo das "Problem" zu sehen ist : http://2022.decke-wand-boden.de

Ich möchte gerne im Absatztyp Panorama Text einzelne Schirftteile unterschiedlich in der Größe machen je nach Auflösung des Endgerätes

Es gibt zwar die Möglichlkeit im Prinzip 2 mal den Absatz zu machen und zu sagen der eine bei Mobil der andere bei Desktop Ansicht aber das sieht ja nicht wirklich immer gut aus je nach Breite bzw. Pixelbreite des Displays

Daher möchte ich die Font-Size dynamisch machen z.B. so habe ich das für das Fakten Panorama gelöst mit einer CSS Anweisung in HTM head Bereich :

 

/* Paralaxe Fakten Panorama Textgröße dynamisch anpassen */
.sqr .sqrfactpanostage > h2 {font-size: calc(14px + (22 - 14) * ((100vw - 481px) / (820 - 481)))!important;}
.sqr .sqrfactpanostage > p {font-size: calc(12px + (16 - 12) * ((100vw - 481px) / (820 - 481)))!important;}

@media screen and (min-width: 821px) {
.sqr .sqrfactpanostage > h2 {font-size: 36px !important;}
.sqr .sqrfactpanostage > p {font-size: 18px !important;}
}
/* ENDE */
 
Die Größe der Texte lasse ich also hier für 3 Pixelbreiten berechnen... das klappt super...
 
Jetzt möchte ich das gleiche dann auf den Panorama Text Absatz anwenden... der enthält zwei "Texte" einmal den großen "Wie Menschen denken und leben, so bauen und wohnen sie." und einmal den kleinen "Johann Gottfried von Herder"

Die Textbereiche wären ja mit einer "Adresse" versehen "#ngparapanotextw7e6803103836e57c960264680303180 p" aber jetzt zu meinem Problem... wie spreche ich die Adresse an um dieser zu sagen font-size: 36px; wird ersetzt durch meine Anweisung z.B. " p {font-size: calc(12px + (16 - 12) * ((100vw - 481px) / (820 - 481)))!important;}" also so oder ähnlich müsste das ja dann aussehen... jetzt bin ich kein CSS Progammierer... lösbar ist das sicherlich ... ABER WIE?

Ich hoffe ihr habt eine gute Idee und Lösung für mich parat 🙂

 

Danke und Grüße von Markus

#2

rotzloeffler

Mitglied  (31 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://skiroller-store.com

Vielleicht mit Script?

Damit ändere ich meine IDs mit HTML-Absatz in Siquando Pro.

Dein Textabsatz ist aber wahrscheinlich eine Klasse, weiss nicht, ob du die auch ansprechen kannst.

Wenn ich mich vage erinnere, ging das bei mir nicht mit Klassen, bin da aber auch kein Experte.

Vielleicht mal googeln, was mit Script so möglich ist... Anbei ein mini Codeschnipselauszug von mir... Hab da auf meiner Seite einiges damit gemacht... Animationen, Hintergrundbilder abgeblendet und einiges mehr. 

<script>
var beispiel = document.getElementById('DeinAbsatz');
beispiel.style.opacity = 0;

</script>


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »rotzloeffler« (30.08.2022, 12:21)
543 Aufrufe | 2 Beiträge