Design Miami: Header-Hintergrundbild und Schriftgrößen responsiv optimieren

Antworten
#1
04.05.2023 13:09 (zuletzt bearbeitet: 04.05.2023 16:08)
avatar  Manhay
#1
Ma
Manhay

Hallo, kämpfe gerade mit dem Template Miami und der Darstellung des Hintergrundbildes für den Header auf verschiedenen Displaygrößen:
Mobil und größer als 1170px = ok; bei Zwischengrößen (v.a. Tablets) wird der Header sehr niedrig und die Grafik dadurch vertikal abgeschnitten.
Habt Ihr einen Tipp was ich da korrigieren muss?
Außerdem soll der Header nur auf der Startseite so groß sein, auf den Unterseiten entweder schmal oder ganz ausblenden.

Wahrscheinlich liegt es daran, dass in diesem code-snippet (das ich irgendwo aus dem Forum kopiert habe) als min-width 1170px definiert ist, oder? wie muss ich es anpassen?

1
2
3
4
5
6
7
8
9
10
11
 
<style>
/* <![CDATA[ */
/* --- Header Height Homepage--- */
@media (min-width: 1170px){
.jtpl-header { 
    max-height: 600px !important; 
    height: 300vh !important;
 } 
}
/*]]>*/
</style>
 



Die Schriftgröße für body text ist in der mobilen Ansicht im Verhältnis zur h1 extrem groß. Da wäre ich auch für Tipps dankbar.


 Antworten

 Beitrag melden
#2
06.05.2023 15:25
avatar  Gismo
#2
avatar
Gismo

Hallo hast du es so schon einmal versucht

1
 
@media (min-width:768px) and (max-width:1169px)
 



zudem wäre ein link auf deine Hompage sehr hilfreich,damit man sich das anschauen kann

Gruss
Gismo


 Antworten

 Beitrag melden
#3
07.05.2023 15:18
avatar  Manhay
#3
Ma
Manhay

Danke, ja ich dachte schon ich muss den Zwischenbereich definieren, wusste aber nicht wie.. versuche ich.
ich kann die URL leider erst in 4 Tagen posten, bin neu hier..


 Antworten

 Beitrag melden
#4
09.05.2023 21:31
avatar  az_
#4
avatar
az_

Mach einfach mit Zwischenräumen… https: // domain. com


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


 Antworten

 Beitrag melden
#5
09.05.2023 21:39 (zuletzt bearbeitet: 09.05.2023 21:44)
avatar  az_
#5
avatar
az_

Das Hintergrundbild kannst Du sowohl über die background-size als auch über die background-position verändern. Der .jtpl-header bietet nur den Rahmen. Das bg-image liegt frei darunter und meistens auch noch in einem anderen Container.
Trotzdem bietet es sich manchmal an, für die mobilen Ansichten (im portrait = Hochformat) ein anderes bg-image zu vergeben, als für die Querformate (landscape).
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


 Antworten

 Beitrag melden
#6
11.05.2023 12:25 (zuletzt bearbeitet: 12.05.2023 16:52)
avatar  Manhay
#6
Ma
Manhay

Super, vielen Dank für die weiteren Tipps, werde ich am Wochenende mal testen.
Hier der Link zur Seite: https://www.20jahre-frauenblasorchester.berlin/


 Antworten

 Beitrag melden
#7
12.05.2023 16:57
avatar  az_
#7
avatar
az_

Danke für den URL Link!
Gleich eine konstruktive Kritik, wenn ich darf: Vorsicht mit Schrift im Hintergrundbild! Immer daran denken, dass nicht alle einen breiten Bildschirm haben. Da das Hintergrundbild meistens auf die komplette Größe des Browserfensters skaliert wird, wird ein Schriftzug darauf oft an den Seiten abgeschnitten. Wenn du so etwas benutzt, brauchst du ganz viel Seitenabstand.
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


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!