Mobirise-Tutorials.com

Also bislang konnte ich für PC und Handy unterschiedliche Bilder angeben
Innerhalb von Mobi sehe ich das nicht mehr, in der Publizierung schon (5.8.12)
, oder habe ich gerade nen Knoten im Hirn?

Code: Alles auswählen

& when (@bg-type = 'image') {
  background-image: url(@bg-value);
  background-position: 85% 70%;
  @media (max-width: 768px) {
    background-position: 50% 0%;
    background-image: url(@bgphone-value);
  }
}

Moin,

wieso nimmst Du dafür Variablen und wo wird denn die Variable @bgphone-value für diese URL gegründet?

Diese URL muss ja bereits irgendwo eingetragen worden sein, meist passiert das bei Mobirise ja über ein "input" Feld bei den Block-Parametern.

... und der Breakpoint ist doch bei max-width: 767px oder? Nicht das Mobirise das wieder irgendwo überschreibt.

Dieses Größer-Gleich-Zeichen ≥ steht ja bei 768px für das Bootstrap-Grid:

https://getbootstrap.com/docs/5.0/layou ... id-options

... also muss es in der Media-Anweisung max-width: 767px heißen - also bis und inklusive 767px.

... ich würde da einfach schreiben:

Code: Alles auswählen

& when (@bg-type = 'image') {
  background-image: url(@bg-value);
  background-position: 85% 70%;
  @media (max-width: 767px) {
    background-position: 50% 0%;
    background-image: url("https://www.Domain.de/images/background.jpg");
  }
}

... ich würde solche Media-Anweisungen auch einfach unten in der CSS vom "Code Editor" dazu schreiben und nicht in irgendwelche IF-Bedingungen setzen - das macht doch alles nur komplizierter, fehlerträchtig und unübersichtlich.

Hier ein Beispiel, das auch auf der Arbeitsseite von Mobirise sogleich richtig angezeigt wird, alle meine Projekte sind inzwischen mit v5.8.12 am Server:

https://www.mobirise-tutorials.com/Busi ... mages.html

Code: Alles auswählen

@media (max-width: 767px) {
  .column {
    width: 100%;
  }
}

Ansicht Arbeitsseite Mobirise:

Das Beispiel oben ist aus dem Thema "BusinessM4", das funktioniert aber ebenso im Standard-Thema "Mobirise5" mit v5.8.12, was ich soeben zusätzlich für Dich getestet habe.

Ich mach mir ja immer für sowas einen eigenen Input.

Code: Alles auswählen

<header>Background Phone</header>
        <fieldset type="background" name="bgphone" parallax>
            <input type="image" title="Image" value="file:///D:/InternetProjekte/SiolasBeauceron/assets/images/friedaaufsteinen.jpeg" selected parallax>
            <input type="color" title="Color" value="#fafafa">
            <input type="video" title="Video" value="https://vimeo.com/428046504">
        </fieldset>

Nach einem PC-Restart ging es dann.
Ich denke, dass Mobi aktuell einen sehr unsauberen Code intern hat und irgendwelche Speicher zugemüllt werden und interne Variablen nicht sauber gehändelt werden. Das würde die ganzen Probleme erklären, die bei dem einen auftreten und bei dem anderen nicht

... also ich habe noch nie solche relativen Pfadangaben zu Dateien verwenden können. Das gibt regelmäßig beim Publizieren mit Mobirise auf den Server eine Fehlermeldung.

Alle Pfade, die nicht über irgendwelchen Editoren von Mobirise (z.B. Bild-Editor) eingelesen werden, kennt die Datei "project.mobirise" nicht und es kommt zu Fehlern. Deswegen gebe ich bei solchen "eigenen" Dateien immer eine Datei mit absolutem Pfad am Server an, denn das wird vom Generator nicht geprüft.

Wenn Du das genau so machst, wie das Mobi selbst auch machst, und den neuen Bilder dann auch den Variablennamen gibst, dann klappt das problemlos.

Hier übrigens die entsprechende Seite
https://www.afripix.de/SiolasBeauceron

Ich streite mit der Kundin immer noch über die Grau-Töne. Passt meiner Meinung nach so gar nicht zu den Farben des Hundes. Außerdem gibt das so eine "Trauer-Stimmung". Aber die Frau hasst jede Farbe und jedes helle freundliche Design
Daher ist da noch Einiges unsauber.

... stört mich jetzt nicht so wirklich, vielleicht fände ich für die Navi die andere Farbe (oder einen Tick dunkler)

#dbdbdb

als Hintergrund besser - vielleicht passt das besser zu den anderen Grautönen der Seite?!

anstelle von jetzt:

Mobirise-Tutorials.com

Bild für Handy Ansicht

Bild für Handy Ansicht

Re: Bild für Handy Ansicht

Re: Bild für Handy Ansicht

Re: Bild für Handy Ansicht

Re: Bild für Handy Ansicht

Re: Bild für Handy Ansicht