Header Titel im Response modus mit kleinerer fontsize?

10.01.2024 20:39 (zuletzt bearbeitet: 14.01.2024 12:09)

Br4thering
#1

Moin moin,

ich habe eine Seite vorbereitet.

Da ich neu bin, darf ich keine links posten aber die Seite ist unter https://bratheringtest.jimdofree.com (bitte das https selber ergänzen) erreichbar

Im Mobile Modus bei @media (max-width:768px) würde ich die Font-size im Header gerne soweit verkleinern, dass der Text "die Werkstatt für gutes Sehen" nur einzeilig dargestellt wird.

Leider scheint das Jimdo Theme selber bei @media (max-width:767px) die Font Size mit !important auf 30px zu setzen. Meine Anweisung im Head wird somit nicht angewendet.

Mein CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
/* Mobile Anpassungen */
@media (max-width:768px) {
    .jtpl-logo img {width:450px !important;}
    .jtpl-logo {padding-left:1px !important;}
    .jtpl-logo {padding-right:1px !important;}
    .j-module h1 {font-size:20px !important;}
    .j-module h2 {font-size:18px !important;}
    .j-module h3 {font-size:16px !important;}
    .j-text {font-size:14px !important;}
    .j-static-page h1 {font-size:20px !important;}
    .j-static-page h2 {font-size:18px !important;}
    .j-static-page {font-size:14px !important;}
    .j-website-title-content {font-size:20px !important;}
}
 
 

Hab ich irgendeine Chance das zu umgehen und die Font-Size auf 20px bei mobile zu setzen oder muss ich damit leben?

Vielen Dank für Eure Hilfe und Tipps

Gruss aus Hamburg
Stefan

Antworten

Beitrag melden

14.01.2024 12:28 (zuletzt bearbeitet: 14.01.2024 12:42)

az_
#2

az_

Hallo Stefan,

...das geht eigentlich ganz einfach. Aber Du hast da jetzt die Zeile in das Bild integriert und den Titel ausgeblendet. Auch eine Lösung, aber damit kann Google nichts anfangen. Besser ist es tatsächlich, die Schriftgröße des title-contents responsiv zu machen - da stimme ich Dir zu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 

<style type="text/css">
	
	.jtpl-title {
		display: block
	}
 

	@media (max-width: 767px) {
		.j-module .j-website-title-content {
			font-size: 5vw !important;
		}
 
	}
 
</style>
 

 

Mit 5vw ist die font-size an die Breite gebunden, deshalb ist sie grösser, wenn das Handy quer gehalten wird.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html