Bild für Handy Ansicht

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

Bild für Handy Ansicht

Ungelesener Beitrag von stobi_de »

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

Re: Bild für Handy Ansicht

Ungelesener Beitrag von Tommy Herrmann »

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%;
  }
}

Column-width-Code.jpg



Ansicht Arbeitsseite Mobirise:


Column-width-Ansicht.jpg



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

Re: Bild für Handy Ansicht

Ungelesener Beitrag von stobi_de »

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

Re: Bild für Handy Ansicht

Ungelesener Beitrag von Tommy Herrmann »

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

Re: Bild für Handy Ansicht

Ungelesener Beitrag von stobi_de »

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

Re: Bild für Handy Ansicht

Ungelesener Beitrag von Tommy Herrmann »

... 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?!


Hintergrundfarbe-Navi 219-219-219.jpg


anstelle von jetzt:

Hintergrundfarbe-Navi Original.jpg
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 28 Gäste