Neu Responsivität einer Custom Header - Box - sowie des linken Logos | Nova Child

[Fries]

Hallo zusammen, ich habe ein massives Problem mit dem "responsivem Auftreten" meine Headers.
Das rechte Logo wurde in einer seperaten Header Box hinzugefügt.
Das linke Logo, was man auch über das Backend einfügen kann, wurde manuell vergrößert und verschoben, sodass alles in der Desktop-Ansicht passt.
Nun war ich in der mobilen Ansicht geschockt, dass es alles verschoben ist. Kann ich im Theme Editor auch angeben, coden, dass sich die Logo's ab einer bestimmten Größe automatisch verkleinern?
Ich habe mal ein paar Screens eingefügt:

Das ist der Code für die obere Zeile inkl. rechtem Logo:



Das wurde am linkem Logo geändern, via Theme Editor:




Vielleicht weiß ja jemand Rat...

Vielen Dank schonmal im Vorraus!

Beste Grüße

 

[Fries]

Hat niemand einen Anhaltspunkt parat?😕

 

[Fries]

Wäre echt klasse, wenn mir jemand helfen könnte!.

 

[mastertango]

das kannst du über die Media-Breakpoints machen z.B.

//576px up

@include media-breakpoint-only(sm) {
    

header .navbar-brand img {
    deine Maße
}
}

dort kannst du die 5 Breakpoints durchprobieren. ...

0-576
576- 768
768-992 ( alles Mobil )
992-1300
und 1300... Ende

Je nachdem wie es am besten aussieht passt du die Größen dort an

 

[Fries]

das kannst du über die Media-Breakpoints machen z.B.

//576px up

@include media-breakpoint-only(sm) {
   

header .navbar-brand img {
    deine Maße
}
}

dort kannst du die 5 Breakpoints durchprobieren. ...

0-576
576- 768
768-992 ( alles Mobil )
992-1300
und 1300... Ende

Je nachdem wie es am besten aussieht passt du die Größen dort an

Hallo Mastertango, wo füge ich die 5 Breakpoints ein? - was bedeutet das (sm) ?

Habe mal einen Screen angehangen..

 

[Fries]

Hallo Mastertango, wo füge ich die 5 Breakpoints ein? - was bedeutet das (sm) ?

Habe mal einen Screen angehangen..

Den Anhang 73827 betrachten

irgendwie ist er mit den 100px nicht zufrieden; "parse error: failed at `100px,` (stdin) on line 32, at column 5"

 

[Fries]

irgendwie ist er mit den 100px nicht zufrieden; "parse error: failed at `100px,` (stdin) on line 32, at column 5"

Fehler gefunden 😁 Trotzdem verstehe ich leider noch nicht die sache, wo ich die breakpoints eintragen muss..

 

[mastertango]

ich muss gerade selber überlegen.... sind die 5 Breakpoints nicht schon in der mynova.scss drin ....?
Wenn nicht ...da gehören die rein. Du kannst sie auch nochmal in der in der mynova_crit.scss eintragen wenn du critical css hast... sprich du möchtest das elemente vorab geladen werden wie bei uns z.B. die Elemente im Header.

 

[Fries]

ich muss gerade selber überlegen.... sind die 5 Breakpoints nicht schon in der mynova.scss drin ....?
Wenn nicht ...da gehören die rein. Du kannst sie auch nochmal in der in der mynova_crit.scss eintragen wenn du critical css hast... sprich du möchtest das elemente vorab geladen werden wie bei uns z.B. die Elemente im Header.

in der mynova_crit.scss finde ich nur diese beiden Anhaltspunkte:

 

[mastertango]

ja die sind da von Anfang an drin ... das ist auch richtig so

 

[Fries]

 

[Fries]

Für mich stellt sich nun die Frage, was muss ich in den Code schreiben um die Mobile Ansicht zu generieren, also alles was kleiner als 768px ist. Wie verfasse ich das?

 

[mastertango]

also ....

//0px up bis 576
@include media-breakpoint-only(xs) {
 
 }
 
 // und  576 - 768 ist
@include media-breakpoint-only(sm) {

}

//768px bis 992
@include media-breakpoint-only(md) {

}

 

[mastertango]

ergänzend .....

//992px bis 1300px
@include media-breakpoint-only(lg) { 
}

und

//1300px bis ende ...
@include media-breakpoint-only(xl) {

}

 

[mastertango]

kannst du auch hier sehen
https://getbootstrap.com/docs/4.6/layout/overview/

 

[Fries]

also ....

//0px up bis 576
@include media-breakpoint-only(xs) {
 
 }
 
 // und  576 - 768 ist
@include media-breakpoint-only(sm) {

}

//768px bis 992
@include media-breakpoint-only(md) {

}

vielen Dank dir schonmal!

was bedeutet @include media-breakpoint-down(md)
@include media-breakpoint-up(md) ? Diese Angaben finde ich ja im crit.scss teilweise..

du schreibst es ja mit only

sind die (xs) , (sm) und (md) genormt ? Oder irgendwo im template festgelegt?

 

[mastertango]

das nova Template basiert auf Bootstrap ...daher ist dass das Framework auf dem alles basiert. Daher ja, genormt.. ... du kannst aber eigene hinzufügen.
https://it-talents.de/it-wissen/bootstrap/
xs, sm, md, xl ... sind die kurzformen ... extra klein , klein , medium, groß....

 

[mastertango]

ja only... weil nur da sollen die CSS anweisungen wirken ...

 

[Fries]

So ist es richtig oder?

oder kann es sein, dass es sich mit der header .navbar-brand img "beisst" da ich diese schon ohne media breakpoint geändert habe?

 

[mastertango]

wenn du außerhalb von media breakpoint änderungen machst wirkt es immer.... was selten in allen auflösungen funktioniert...
deine Änderungen wirken nur da in den Auflösungen vom Breakpoint und ersetzen sozusagen die änderung von ausßerhalb des breakpoints... beist sich also nicht sondern ersetzt es