Seite 1 von 1
Fullscreen auf PC - auf Handy nicht!
Verfasst: Mi 27. Mär 2024, 17:40
von stobi_de
Hallo!
Ich habe hier so einen ganz normalen Mobi-Fullscreen-Header.
Code: Alles auswählen
<section class="header2" group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax, 'mbr-fullscreen' : fullScreen}" plugins="PlayerVimeo">
Ich will nun, dass ab 1200px kein Fullscreen mehr ist.
In CSS will ich dafür die Paddings ab 1200Pixel einschalten. Aber so eben nicht.
Code: Alles auswählen
& when not (@fullScreen) {
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
}
& when (@fullScreen) {
@media (max-width: 1200px) {
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
}
}
Re: Fullscreen auf PC - auf Handy nicht!
Verfasst: Mi 27. Mär 2024, 17:47
von Tommy Herrmann
Moin,
habe heute keine Zeit mehr irgend etwas zu testen.
Ich würde das aber auf keinen Fall über die Variablen machen sondern immer in den Media-Anweisung ganz klare Werte angeben.
Re: Fullscreen auf PC - auf Handy nicht!
Verfasst: Mi 27. Mär 2024, 17:50
von stobi_de
Habs auch schon so versucht, mit festen Werten
Code: Alles auswählen
& when (@fullScreen) {
@media (max-width: 1200px) {
.mbr-fullscreen {
max-height: 10vh!important;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
}
Re: Fullscreen auf PC - auf Handy nicht!
Verfasst: Mi 27. Mär 2024, 17:58
von Tommy Herrmann
… aber auch dort ist doch noch die Variable:
@fullScreen
außen drum herum. Ich hatte mit diesen Variablen auch schon so meine Probleme (keine Ahnung warum).
Diese Variable braucht doch niemand, denn sie passt sich doch nur der verwendeten Schalterstellung des Users an. Alle diese Mobirise-Variablen sind doch nur wegen der änderbaren Blockwerkzeuge im Einsatz.
Re: Fullscreen auf PC - auf Handy nicht!
Verfasst: Mi 27. Mär 2024, 20:07
von stobi_de
Das war "eigentlich" auch richtig, dass das FULLSCREEN eingeschaltet ist.
Nur auf dem Handy sollte das Fullscreen ja nicht mehr so full sein.
Habe nun das Fullscreen ausgeschaltet und für den PC händisch zum Fullscreen gemacht.
Irgendwie konnte ich das "when @fullScreen" nicht ändern....
Ach so, nochwas: wenn ich hier was schreibe, dann erwarte ich nicht, dass Du sofort antwortest. Du hattest ja oben geschrieben, dass Du heute keine Zeit mehr hast. Ich schreibe das nur heute, weil ich es sonst vergesse. Vor allem, wenn ich eine Lösung zu meinem eigenen Problem gefunden habe.
Code: Alles auswählen
& when not (@fullScreen) {
display: flex;
align-items: center;
min-height: 100vh;
padding-top: 3rem;
padding-bottom: 3rem;
@media (max-width: 1200px) {
min-height: 30vh;
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1.5rem);
}
@media (max-width: 991px) {
min-height: 30vh;
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 0.5rem);
}
}
.title__block {
z-index: 1;
}
Ach ja, für diese Landingpages mache ich das. Auf dem Handy sind da viel zu große Abstände gewesen.
Die alten M4 Themes waren viel schöner als die neuen, aber auch schlecht ausgearbeitet.
https://www.new-style-hair.de/peruecken ... rsbach.php