-
Posts
-
Guten Morgen,
unser Firmenauftritt ist nun so gut wie fertig und könnte online gehen, wenn die Ansicht für mobile Geräte nicht noch ein „grausamer“ Anblick wäre…
Hierbei bräuchte ich bitte nochmals Hilfe.
1. Beim Zeitstrahl (Seite „Über uns“) Das Miniaturbild ist auf mobilen Geräten leider ausgegraut und wird daher so gut wie gar nicht wahrgenommen. Gibt es eine Möglichkeit die kleinen runden Bilder auch auf mobilen Geräten farbig zu sehen?
2. An sich ist eine bessere Darstellung für mobile Geräte gewünscht, ohne dass das Handy vom Hochformat auf Querformat gedreht werden müsste.
3. Auf der Seite Referenzen funktioniert bei Android Handys der Effekt „Graustufen-Effekt“ nicht. Also das die Bilder farbig werden, sobald man darüber fährt. Bei meinem Iphone funktioniert es allerdings.
Um diese drei Hauptprobleme in den Griff zu bekommen habe ich zwar bereits in Erfahrung bringen können, dass man dazu Viewports anpassen muss. Klingt zwar gut, aber ich weiß leider nicht wie und wo. Also falls das die Lösung für die genannten Probleme ist, bräuchte ich eine Anleitung wie und wo ich die Viewports anpasse.Über Hilfe in deutsch würde ich mich sehr freuen.
Vielen Dank,
KerstinHallo Kerstin,
1. Bitte versuchen Sie Folgendes in Quick CSS unter Enfold->General Styling:
@media only screen and (max-width: 767px) { span.milestone_icon { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } }2. Ich bin mir nicht sicher, ob ich diese Frage verstehe. Könnten Sie bitte versuchen, etwas genauer zu sein? Wenn Sie Screenshots der Probleme haben, veröffentlichen Sie diese bitte in Ihrer nächsten Antwort.
3. Ich kann das mit Chrome auf einem Samsung A31 nicht reproduzieren. Siehe Screenshot privat. Da es auf Mobilgeräten keinen Schwebeflug gibt, ist das Verhalten im Vergleich zum Desktop etwas anders.
—Text above is translated from the test below—
Sorry for the late reply.
1. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { span.milestone_icon { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } }2. I’m not sure I understand this question, could you try to be a bit more specific please? If you have screenshots of the problems, then please post them in your next reply.
3. I can’t reproduce that on my end using Chrome on a Samsung A31, please see screenshot in private. Since there is no hover on mobile, the behaviour is a bit different, compared to desktop.
LG,
RikardHallo Rikard,
vielen Dank für deine Antwort.
Ich habe dir eine Seite auf der Homepage angelegt (siehe Private Data) die drei Screenshots vom Handy zeigt.3 Probleme sind es die ich unbedingt lösen muss.
Bild links: Das Bild im roten Kreis soll auch auf Handys farbig sein. Ist aber schwarz-weiß
Bild mitte: Angeblich funktioniert der Effekt mit dem drüberfahren nicht, bei Android Handys (bei meinem Iphone klappt das jedoch wunderbar).
Bild rechts: Das sind eigentlich 5 Bilder nebeneinander und auch 5 Texte nebeneinander (in Spalten). Es werden aber auf Handys nur 3 Spalten angezeigt.
Ich hoffe ich konnte mein Problem nun etwas besser beschreiben.
Vielen Dank im Voraus für deine Hilfe!
KerstinHallo Rikard,
ich habe dein Vorschlag ausprobiert und unter Enfold im Quick CSS eingetragen. Leider wurde keines meiner Probleme dadurch behoben.
Hier nochmal die drei Probleme die ich beheben muss (siehe Bilder im Link Private Data:)
Das wichtigste Problem ist allerdings im Bild 3 zu sehen. Es sind 5 Spalten Text (auf dem Desktop), auf Handys werden aber nur 3 angezeigt.Bild links: Das Bild im roten Kreis soll auch auf Handys farbig sein. Ist aber schwarz-weiß. Beim iphone ist das farbig, wie auch auf der Homepage.
Bild mitte: Angeblich funktioniert der Effekt mit dem drüberfahren nicht, bei Android Handys (bei meinem Iphone klappt das jedoch wunderbar).
Bild rechts: Das sind eigentlich 5 Bilder nebeneinander und auch 5 Texte nebeneinander (in Spalten). Es werden aber auf Handys nur 3 Spalten angezeigt.
Ich hoffe ich konnte mein Problem nun etwas besser beschreiben und freue mich über eine schnelle Hilfe.
Vielen Dank im Voraus für deine Hilfe!
KerstinHallo,
1. Bitte versuchen Sie stattdessen dieses CSS:
@media only screen and (max-width: 767px) { span.milestone_icon { opacity: 1 !important; -webkit-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; } }2. Bitte versuchen Sie auch dieses CSS:
@media only screen and (max-width: 767px) { .av-hover-overlay-grayscale .av-masonry-entry .av-masonry-image-container { filter: none !important; } }3. Ich bin mir nicht sicher, ob ich verstehe, was Sie dort ändern möchten. Bitte versuchen Sie es etwas näher zu erläutern.
Bitte bleiben Sie in Zukunft bei einem Problem pro Thread.
——Text above is translated from the test below——
1. Please try this CSS instead:
@media only screen and (max-width: 767px) { span.milestone_icon { opacity: 1 !important; -webkit-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; } }2. Please try this CSS as well:
@media only screen and (max-width: 767px) { .av-hover-overlay-grayscale .av-masonry-entry .av-masonry-image-container { filter: none !important; } }3. I’m not sure I understand what you are looking to change there, please try to explain a bit further.
In the future, please stick to one problem per thread.
LG,
RikardHallo Rikard,
ich soll mich auf nur ein Problem konzentrieren? Ich dachte die hängen alle zusammen. aber gut.
Bitte schau dir die beiden Screenshots an (siehe Private Content) + die Erklärung darunter.Wenn man sich die Homepage auf einem Computer anschaut, werden 5 Bilder nebeneinander angezeigt und darunter Text, aufgeteilt in 5 Spalten.
Auf dem Handy werden zwar die 5 Bilder angezeigt, aber nur 3 Spalten Text. Wie kann ich das für die mobile Ansicht anpassen, dass auch hier 5 Spalten angezeigt werden und der Text dabei gut lesbar ist.
Sorry, aber ich weiß beim Besten Willen nicht, wie ich das anders erklären soll.
Über schnelle Hilfe bin ich dankbar.
Viele Grüße
KerstinHallo Kerstin,
Wenn die Bilder und Spalten gleichzeitig unterbrochen werden sollen, platzieren Sie die Bilder bitte in jeder der Spalten. Ich habe Ihre Startseite überprüft, aber der Inhalt Ihrer Screenshots stimmt nicht mit dem überein, den ich auf der tatsächlichen Seite sehe.
—Translation—
If you need the images and columns to break at the same time, then please place the images inside of each of the columns. I checked your front page, but the content in your screenshots doesn’t match what I’m seeing on the actual page.
LG,
RikardHallo Rikard,
es geht nicht um die Startseite, sondern um die Seite “Marken und Shops”, hätte ich nochmals erwähnen sollen, sorry.. Die Screenshots sind von der Seite “Marken und Shops” und auf dieser Seite ist auch das Hauptproblem. Auf der Desktop Ansicht werden alle 5 Spalten dargestellt, auf der Handy Ansicht nur 3. Auch weiter unten sind sie nicht zu finden, sie sind einfach weg.Ich habe deinen Lösungsvorschlag ausprobiert (siehe Seite Marken und Shops, auf der Seite ganz unten), das funktioniert auch nicht. Es werden nur 3 Spalten angezeigt, die beiden anderen werden nicht dargestellt. (Screenshot Bild rechts. Dieser ist nach deinem Vorschlag umgebaut, also die Bilder mit in die Spalten, nun werden aber nur noch 1,5 Spalten dargestellt.)
Es muss doch eine Lösung dafür geben.
Hallo,
Danke für die Klarstellung. Sie haben den gesamten Inhalt dieser Seite in einer Tabelle platziert. Warum haben Sie das getan? Bitte versuchen Sie stattdessen, 1/5 Elemente aus dem Layout Builder zu verwenden.
—Translation—
Thanks for the clarification. You have placed all the content on that page in a table, why did you do that? Please try using 1/5 elements from the Layout Builder instead.
LG,
RikardHallo Rikard,
sorry wegen meiner späten Antwort, ich hatte Urlaub.Ich habe das Layout auf 1/5 umgebaut, wie du es vorgeschlagen hast.
Es ist zwar nicht 100% das was ich wollte, aber nützt erstmal für meine Zwecke und die Homepage kann online.
Dankeschön für die Hilfe,
Kerstin
- You must be logged in to reply to this topic.