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

Fries

Mitglied
26. August 2021
123
3
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:
header.png
Das ist der Code für die obere Zeile inkl. rechtem Logo:
Box-code-logo.png


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


linkes-logo-code.png

Vielleicht weiß ja jemand Rat...

Vielen Dank schonmal im Vorraus!

Beste Grüße
 

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.453
38
Wustrow
das kannst du über die Media-Breakpoints machen z.B.

Code:
//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

Mitglied
26. August 2021
123
3
das kannst du über die Media-Breakpoints machen z.B.

Code:
//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..

Unbenannt.png
 

mastertango

Sehr aktives Mitglied
10. Oktober 2009
2.453
38
Wustrow
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

Mitglied
26. August 2021
123
3
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:

Unbenannt.png
 

Fries

Mitglied
26. August 2021
123
3
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

Sehr aktives Mitglied
10. Oktober 2009
2.453
38
Wustrow
also ....

Code:
//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) {

}
 
  • Gefällt mir
Reaktionen: Fries

Fries

Mitglied
26. August 2021
123
3
also ....

Code:
//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?
 

Fries

Mitglied
26. August 2021
123
3
Unbenannt.png


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

Sehr aktives Mitglied
10. Oktober 2009
2.453
38
Wustrow
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
 
  • Gefällt mir
Reaktionen: Fries
Ähnliche Themen
Titel Forum Antworten Datum
Neu Anführungszeichen werden im Betreff einer Email falsch dargestellt. Betrieb / Pflege von JTL-Shop 0
Neu JTL Versenden / Packtich erzeugen einer Pickliste JTL-Wawi - Ideen, Lob und Kritik 0
Neu Rechnungsdruck 3x bei Ausgabe einer CN23 automatisch User helfen Usern - Fragen zu JTL-Wawi 2
Neu Programmatisch Kunden einer Benutzergruppe zuweisen User helfen Usern - Fragen zu JTL-Wawi 1
Neu JTL Wawi - Verkauf F6 alle E-Mail Adressen in einer CSV exportieren User helfen Usern - Fragen zu JTL-Wawi 2
Neu Validierung einer Bestellung Technische Fragen zu Plugins und Templates 0
Neu Mehrere Versandlabels auf einer DIN A4 gleichzeitig drucken (DPD) Arbeitsabläufe in JTL-Wawi 9
Beantwortet Hilfe bei einer erweiterten Eigenschaft (Datum.Jetzt >= Vorgang.Lieferung.VoraussichtlichesLieferdatum | AddDays: -21 ) JTL-Workflows - Fehler und Bugs 2
Neu offline Artikel werden durch online gehen einer Kategorie ebenfalls online gestellt JTL-Wawi - Fehler und Bugs 3
Neu Automatisches Einlesen einer CSV-Datei die auf externer URL liegt mit anschließender Aktualisierung im Shop Arbeitsabläufe in JTL-Wawi 10
Neu Variationenkombis mit einer Stückliste verknüpfen User helfen Usern - Fragen zu JTL-Wawi 3
Neu Anbindung einer neuen Plattform User helfen Usern - Fragen zu JTL-Wawi 9
Beantwortet Bestellung aus Standardlager und WMS Lager zusammen abarbeiten - mit einer Rechnung Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 6
Neu Zahlungsart unter "Meine Bestellungen" zeigt 2. Zahlungsart einer nicht existierenden Bestellung an Allgemeine Fragen zu JTL-Shop 0
Neu CSV Datei mehere Bilder in einer Spalte User helfen Usern - Fragen zu JTL-Wawi 5
Gelöst Fehlermeldung beim Versenden einer Email aus Workflow JTL-Workflows - Fehler und Bugs 3
Neu Artikel löschen die nicht in einer CSV vorhanden sind JTL-Ameise - Ideen, Lob und Kritik 4
Neu Shopify - Custom Metafelder an Wawi übermitteln Onlineshop-Anbindung 0
Neu Amazon Custom - Information via Workflow ins "Sonstiges" Feld schreiben Amazon-Anbindung - Ideen, Lob und Kritik 1
Neu Custom connector ImageController Onlineshop-Anbindung 0
Neu Custom Porducts SW6 swag_customized_products_template_id Shopware-Connector 2
Neu Custom Breakpoint mobile Navigation Templates für JTL-Shop 1

Ähnliche Themen