|
|||
Abstände/Titelbild zoomen
Hallo Zusammen
Ich möchte gerne, dass der Abstand zwischen Header.Bild und Inhalt-Titel verkleinern. Der Abstand zwischen Header Bild un Inhalt-Titel soll egal mit welcher Auflösung die Homepage besucht wird immer gleich aussehen. Ich habe mit Hilfe des Browser EntwicklungsTool versucht herauszufinden wie der Abschnitt heisst. Die Homepage ist mit Wordpress aufgebaut und verwendet das Design "Nisarg" Es geht um die Homepage: http://test.myservice4you.ch Kann mir jemand ein Tipp geben, wie ich dies herausfinde, respektiv anpassen kann. |
Sponsored Links |
|
|||
Dein CSS ist ziemlich unübersichtlich... um nicht verwurschtelt zu sagen.
Aber dein Problem liegt darin begründet, dass du deinem <div class="site-header"> zum einen eine Code:
height: 100px !important; Code:
background-size: 60%; Das passt nicht zusammen - das DIV hat eine feste Höhe (100px) und das Hintergrundbild schrumpft bis es klein und mickrig ist... eben die 60%, abhängig von der aktuellen Bildschirmbreite. Um das zunächst mal zu beheben müsstest du das Hintergrundbild auf Code:
background-size: contain; HTML-Code:
@media screen and (max-width: 1000px){ .site-header { height: calc(100vw / 10) !important; } } |
Sponsored Links |
|
|||
Vielen Dank schon mal für die Infos.
die "background-size: 60%;" habe ich gesetzt gehabt im css, da ich möchte, dass das Bild NUR so breit ist wie das Menü oben oder so breit wie das Kontaktformular Kontaktformular. habe den code nun angepasst auf "background-size: contain;" jetzt wird das Header-Bild auf die ganze breite verteilt. Mit 60% hatts gut geklappt für wenn man es an einem grossen Bildschirm anschaut. aber wenn mans verkleinert hat, wurde der Abstand zwischen Header-Bild und Titel "Kontaktformular" zu gross. Auch jetzt finde ichs etwas zu gross der Abstand zwischen Header-Bild und Titel "Kontaktformular" Auch der Abstand zwischen Titel und dem Kontaktformular würde ich gerne etwas verkleinern. wenn dies geht |
|
|||
Wenn du nicht möchtest, dass sich das Bild bei kleinerem Bildschirm auf die gesamte Breite ausdehnt, dann musst du ein bisschen mit den Werten in der MediaQuery spielen.
So wie ich es im vorherigen Post angegeben habe, ist es so gewollt, dass das Bild eben sich bis 100% ausdehnt. Aber versuche mal... HTML-Code:
@media screen and (max-width: 1400px){ .site-header { height: calc(100vw / 14) !important; } } HTML-Code:
@media screen and (max-width: 1200px){ .site-header { height: calc(100vw / 12) !important; } } Spiel mal mit den Werten, dann siehst du schon, wie es funktioniert. Was du mit diesen Werten machst, bestimmt den Zeitpunkt (Bildschirmbreite) ab wann das DIV anfängt zu schrumpfen - das Hintergrundbild schrumpft dann automatisch mit. |
|
|||
Du hast auch an der 'height'-Einstellung für das DIV .site-header was geändert!
Bis vorhin waren da height: 100px !important; eingetragen - jetzt hast du jede Menge @mediaQueries aktiviert, die je nach Bildschirmbreite die Höhe des DIV's festlegen. Dann funktioniert das auch nicht! Nochmal zur Erklärung. Mit der Anweisung Code:
background-size: contain; Bei der ursprünglich angegebenen Höhe von 100px wird das Bild dann 1000px breit angezeigt. Jetzt... durch deine Änderungen... wird aber die Höhe in Stufen bis auf 160px erhöht und das passt dann schon mal gar nicht! |
|
|||
Ja, die Height: 100px ! importaint habe ich wieder entfernt, da ich dies selbst hingeschrieben habe.
Den so war das Bild wenigstens wenn der Bildschirm 100% geöffnet war korrekt. Kann ich auch anstelle Height auch width angeben. also mein Ziel ist es, egal welche Bildschirm grösse der Besucher hat, dass das Header Bild immer die breite des Kontaktformular oder Menü hat und sich dann die grösse selbst anpasst. Aber der Abstand zum Titel unterhalb des Header-Bild soll immer gleich gross sein und nicht, wenn vergrössern. |
|
|||
Ok... neuer und hoffentlich letzter Versuch.
Die Breite deiner Inhaltselemente wird durch @MediaQueries in 4 Stufen jeweils auf einen passenden Wert gesetzt. Das müssen wir dann für den Container 'nachbauen', in dem dein Header-Bild als Hintergrund drin ist. Es muss aber wieder die Höhe des Containers an die Bildschirmbreite angepasst werden. Der folgende CSS-Code muss ganz am Ende deiner Style-Anweisungen stehen, damit alle vorherigen Anweisungen überschrieben und damit ungültig werden. Das geht am besten im 'zusätzlichen CSS' im Customizer und dort eben als letztes. HTML-Code:
.site-header { height: calc(100vw / 10.3) !important; } @media screen and (min-width: 768px) { .site-header { height: 72px !important; } } @media screen and (min-width: 992px){ .site-header { height: 95px !important; } } @media screen and (min-width: 1200px) { .site-header { height: 114px !important; } } |
|
|||
Ich habe den Code bei sit-header angepasst, aber es macht nicht was ich möchte.
ich muss es glaube ich aufgeben. Den dieses WordPress Thema Nisarg kann man nicht so anpassen was ich will. Schade, den sonst die Aufteilung und Struktur des Thema würde mir passen. den ich sitze nun seit 2 tagen schon daran und drehe mich um den kreis. wenn es für vollbild stimmt das header bild und der Abstand, dann passt es nicht mehr die bildgrösse und vor allem auch der abstand, wenn der Bildschirm kleiner ist Das Header Bild soll immer so gross sein, wie das Menü oder Kontaktformular. Der Abstand zwischen Header-Bild und Inhalt-Titel soll immer gleich gross sein, egal welche Auflösung der Bildschirm hat. |
Sponsored Links |
|
|||
Ich weiß ja nicht, was du da so nebenher mit deinem CSS machst - aber anscheinend hast du das
Code:
background-size: contain; Edit --- code korrigiert. Geändert von Sailor56 (01.09.2019 um 11:07 Uhr) |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV's verschieben sich beim zoomen | IxonTV | (X)HTML | 9 | 07.08.2018 08:15 |
Fluides IMG beim hovern zoomen | schatzi | CSS | 4 | 11.09.2014 16:33 |
Zentrierter Mittelcontainer - Außencontainer verschieben sich beim Zoomen ... | Phoenix2048 | CSS | 27 | 04.09.2014 19:54 |
Problem: Navigation verschiebt sich beim Zoomen | Thasoullady | CSS | 4 | 24.08.2013 11:21 |
Beim Zoomen zerreist Menü | dp-wurzel | CSS | 1 | 04.02.2008 00:54 |