Container in der Smartphone Ansicht ausblenden

  • Ach ja und moin moin .....


    Ich mal wieder mit meinen Fragen!


    Kann ich irgendwie ein Bild ab einer bestimmten Größe in der Smartphone Ansicht ausblenden - habe das schon mal gefragt, finde es nicht wieder!


    Viel wichtiger aber jetzt die Frage; kann ich einen kompletten Container bei der Smartphone Ansicht ausblenden?


    Bleibt mir alles gesund .. und die, die Agenturen hinter sich stehen haben, hoffe ich das die Aufträge nicht all zu sehr wegbrechen!

  • Hi und Danke!


    Jetzt kommt es wieder .... was genau muss ich jetzt machen :wacko:

  • Guten Morgen Holger,


    auf Zahnrad im container klicken, nun öffnet sich die Darstellung auf der linken Seite bei CSS-Klasse z.B: class-container-holger (die Bezeichnung kannst du bestimmen wie du magst) eintragen.


    Der Eintrag der notwendigen CSS kann unter anderem hier erfolgen:


    Webseite - Einstellungen - CSS folgenden Eintrag machen:


    Code
    <style>
    @media screen and (max-width: 400px){
    .class-container-holger {
    display: none
    }
    }
    </style>


    Die screen-width (400px) kannst du dann individuell für deine Bedürfnisse anpassen. Den style-tag benötigst du nur einmal für all deine zusätzlichen css Angaben ... Je nach Projekt wird es notwendig, die css-Anweisung mit einem "important" zu versehen. Also dann:


    Code
    <style>
    @media screen and (max-width: 400px){
    .class-container-holger {
    display: none !important
    }
    }
    </style>
  • Guten Morgen mayer,


    ich komme da gerade nicht zu ... ABER vielen lieben Dank für die Unterstützung und Geduld :-)


    Heute Abend werde ich es versuchen .... ich werde berichten!

  • Guten Morgen,


    die letzte CSS Anweisung benötigt keine ( ;), wichtig ist css-Datei so klein wie möglich zu halten, bei 2000 Zeilen kommen da schnell einige überflüssige Zeichen zusammen.


    Ich habe das eben mal durchgetestet:


    Wie ich oben beschreiben habe funktioniert das nicht, die css Anweisung erscheint nicht mal im header im Seitenquelltext (da bin ich nun schon sehr verwundert).


    Als ich die CSS - Anweisung in meine global CSS-Datei (bundle-css) hinein kopiert habe, hat die Anweisung wunderbar funktioniert...

  • Wie ich oben beschreiben habe funktioniert das nicht, die css Anweisung erscheint nicht mal im header im Seitenquelltext (da bin ich nun schon sehr verwundert).


    Als ich die CSS - Anweisung in meine global CSS-Datei (bundle-css) hinein kopiert habe, hat die Anweisung wunderbar funktioniert...

    Der Herr Mayer hat so viele Anpassungen und Spezialfälle, dass er nur bedingt als Referenz für solch einen Supportfall gelten sollte. Wenn Sie das CSS, wie auch von Mario beschrieben in den Einstellungen > CSS einfügen, sollte es nach dem veröffentlichen schon den Weg auf Ihre Seite finden…

  • mayer so war es natürlich nicht gemeint. Vielen Dank für die Hilfe!

    Aber wenn etwas bei Ihnen nicht oder anders funktioniert, heißt es eben nicht, dass das bei anderen auch so sein wird, denn Ihr Projekt ist ja schon sehr umfangreich angepasst. Mehr wollte ich damit nicht sagen.

  • Hallo mayer ,


    zu #11: Nein! bitte weitermachen. Die Schwierigkeit ist, dass solche User wie Du, Mario und einige andere (ich ertappe mich selbst auch immer wieder dabei) natürlich exzellente Kenntnisse vom Programm und besonders bei Mario und Dir auch tiefgreifende Kenntnisse zu CSS & Co. vorhanden sind. Wir geben dann gerne mal einen Tipp aus der Nähkiste, der für uns ganz einfach umsetzbar ist, beim User hakt es dann aber. Zum Schluss führt ein fehlerhaft eingefügter HTML-Code dann zu anderen Problemen, weswegen der User ein neues Thema eröffnet. Der Support weis dann nichts über den individuellen Code, weshalb die Fehlersuche länger dauert.


    Also Weitermachen, aber auch immer mal wieder darauf hinweisen, dass man für sich selbst jede Änderung an CSS oder HTML-Quelltext dokumentiert, damit man später auch noch nachvollziehen kann, wozu dieser Code eigentlich dient. Hierzu am Besten /*kommentar*/ als separate Zeile in den Code einfügen.

  • Hallo mayer,

    ich wollte dich keineswegs kritisieren, bitte weitermachen. Deine Hilfe ist hier sehr willkommen. Gerade für Shop-Benutzer ist sie schon fast unabdingbar.


    Was das ; betrifft. Du hast schon recht das der letze Eintrag dieses nicht benötigt. Dies gilt allerdings nur für "Inline-CSS". Bei CSS welches im Header oder einer einer CSS-Datei geschrieben wird muss auch der letzte Eintrag das abschließende ; erhalten. Gut möglich das das CSS auch manchmal so funktioniert, korrekt ist es nicht.


    Das das CSS nicht im Header steht kann ich nicht verstehen. Einträge welche unter "Einstellungen > CSS" vorgenommen werden sollten auf allen Seiten in den Header geschrieben werden.

  • Salut alle zusammen

    @ HOK: Nicht aufgeben. Es funktioniert definitiv. Ich bin der lebende Beweis dafür (Im Quelltext ab ca. Zeile 95) :D

    @ mayer: Bitte weitermachen! ...

    Nach dem Einfügen des CSS-Code unter "Einstellungen > CSS" kurz den Weg über (z.B.) "EXTRAS -> Entwickler -> Änderungen übernehmen" machen. (Editiert: Nur bedingter Tipp)


    @ HOK: Da ich zufälligerweise gerade zu Hause "festsitze", werde ich - wenn gewünscht - heute eine Schritt-für-Schritt-Bastelanleitung erstellen und hier posten... Mit Bildern! Dies dauert jedoch einen Moment. Und ist dann wohl ein Thema für die Bastelecke dieses Forums.


    Ich komme wieder.

  • Das das CSS nicht im Header steht kann ich nicht verstehen. Einträge welche unter "Einstellungen > CSS" vorgenommen werden sollten auf allen Seiten in den Header geschrieben werden.

    Ausser man hat sein Projekt dahin gehend verbogen, dass man das entsprechende Attribut auf einer Seite bearbeitet hat… Aber das führt hier jetzt zu weit.


    Man kann in ZP mit angepasstem CSS/HTML so einiges erreichen. Wenn man das aber nicht hinkriegt, wäre eine Lösung ja ggf. auch einfach mit den vorhandenen Möglichkeiten zu leben und das beste daraus zu machen.

    Wir erleben es nämlich hier sehr oft, dass Nutzer solche Anpassungen machen, nicht wirklich verstehen was Sie das tun (müssen Sie ja auch nicht, deshalb gibt es ja ZP), und nach einiger Zeit nicht mehr wissen, dass Sie die Anpassung gemacht haben. Das generiert dann enormen Support-Aufwand…

  • Stefan S dann wir es wohl besser sein, wenn ich in Zukunft nicht mehr versuche Mitglieder hier im Forum zu helfen.

    Ich bitte drum es doch zu tun ... :-)


    Wo geholfen wir, fallen auch mal Späne ;-)


    Ich probiere weiter ... ;-)

  • Salut zusammen,

    salut HOK


    Hier also meine Androhung, bezw. die Bastelanleitung…



    Container(-Element) in Desktop sichtbar, in Mobile ausgeblendet


    WARNUNG!
    Die folgenden Manipulationen haben direkten Einfluss auf die LiveView-Bearbeitungsfläche in Zeta Producer!

    WARNUNG!
    Fehlmanipulationen können dazu führen, dass Elemente (Container, Reihe, Spalte oder Artikel) in der LiveView nicht mehr erscheinen, bzw. bearbeitbar sind.

    Zudem kann es gegebenenfalls in der LiveView die (verbleibenden) Elemente durcheinanderwirbeln.

    ACHTUNG!
    Diese Anleitung basiert in der Annahme, dass die Seiten-Attribute (additional_css) nicht „überschrieben“/bearbeitet wurden.

    Im Notfall
    Taste „F8“ drücken und im Spaltenmodus das Element bearbeiten oder löschen.


    1. Einstellungen -> CSS ->

    Code
    <style>
    @media (max-width: 1000px) {
    .nurInDesktopSichtbar {
    display: none;
    }}
    </style>

    Code eiinfügen

    per „OK“ schliessen


    2. Container, der in der mobilen Ansicht ausgeblendet werden soll:

    Container 1 -> Zahnrad/Darstellung anklicken.

    Reihe -> Feld „Hier beginnt ein neuer Container“ anklicken.


    3. Container, welcher nach auszublendendem Container folgt:

    Container 2 -> Zahnrad/Darstellung anklicken.

    Reihe -> Feld „Hier beginnt ein neuer Container“ anklicken.


    4. Zu Container 1 zurückkehren.

    Container 1 -> Zahnrad/Darstellung anklicken.

    CSS-Klasse einfügen.

    Code
    nurInDesktopSichtbar


    F6 drücken


    In LiveView und in „Vorschau“ (Browser) testen. Gegebenenfalls Werte (max-width: 1000px) anpassen.



    So. Ich hoffe nichts vergessen zu haben :|


    Viel Erfolg und gute Tage!


    Viele Grüsse
    elch

  • Hurra :-)


    Danke, Danke, Danke!


    Geht so etwas übrigens auch anders herum?


    Also einen Container, der der nur auf dem Samrtphone angezeigt wird?

  • Salut ... auch dir vielen, vielen Dank!