Fullscreen auf PC - auf Handy nicht!

Allgemeine Fragen
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Fullscreen auf PC - auf Handy nicht!

Ungelesener Beitrag 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);
    }  
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Fullscreen auf PC - auf Handy nicht!

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Re: Fullscreen auf PC - auf Handy nicht!

Ungelesener Beitrag 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;
    }
  }
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Fullscreen auf PC - auf Handy nicht!

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Re: Fullscreen auf PC - auf Handy nicht!

Ungelesener Beitrag 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
Antworten

Wer ist online?

Mitglieder in diesem Forum: Majestic-12 [Bot] und 2 Gäste