Container in der Smartphone Ansicht ausblenden

Hallo Holger,

denke wenn du dem Container eine css classe gibst, kannst du den Container ausblenden:

z.B.

media screen and (min-width: 400px){

.class-container-holger {

display: none

}

}

sorry (max-width: 400px)

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:

<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:

<style>


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

Da hat sich ein kleiner Fehler eingeschlichen. Ein fehlendes ;.

Probiere es nochmal so:

Wie beschrieben gibst du dem Container die CSS-Klasse: class-container-holger.

Unter Einstellungen > CSS fügst du folgendes ein:

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

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

Zitat von mayer

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…

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

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)

@ 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.

Zitat von Mario

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…

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 ->

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

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