Hallo zusammen
Ich habe ein Bild, mit Link, welches auf dem Desktop gut aussieht, aber nicht am Handy.
Da der Link auch über einen Button zu erreichen ist, möchte ich das Bild gerne auf Mobile unterdrücken. Wie mache ich das?
Bild auf Mobile ausblenden
-
- Offizieller Beitrag
Mit Bordmitteln kann man nur ganze Reihen ab einer bestimmten Bildschirmbreite ausblenden (Darstellungs-Einstellungen > Reihe > Reihe verbergen ab). Alternativ können Sie das per CSS lösen (Kenntnisse vorausgesetzt).
-
Alternativ können Sie das per CSS lösen (Kenntnisse vorausgesetzt).
Wie genau wäre das lösbar?
Habe einen ähnlichen Fall:
Auf der Startseite habe ich einen Slider, der über die ganze Bildschirmbreite geht. Am Desktop natürlich problemlos lesbar.
Auf Mobilgeräten ist das dann aber viel zu klein. Da würde ich dann gerne einen eignenen "Mobile"-Slider anzeigen. -
- Offizieller Beitrag
Wir können hier, zeitlich bedingt, nicht jeden Wunsch nach individuellem CSS erfüllen.
Es kann aber gut sein, dass sich hierzu noch ein anderer Nutzer mit den entsprechenden Kenntnissen meldet.
-
- Offizieller Beitrag
Auf der Startseite habe ich einen Slider, der über die ganze Bildschirmbreite geht. Am Desktop natürlich problemlos lesbar.
Auf Mobilgeräten ist das dann aber viel zu klein. Da würde ich dann gerne einen eignenen "Mobile"-Slider anzeigen.Wenn Sie uns einen Link zu der Seite mitteilen, fällt uns ggf. eine Alternative ein.
-
Wenn Sie uns einen Link zu der Seite mitteilen, fällt uns ggf. eine Alternative ein.
Geht schlecht, ist aktuell noch nicht veröffentlicht.
Habe mir jetzt mal selbst geholfen:
- Element(e), die nur am Desktop angezeigt werden sollen, mit der CSS-Klasse "desktop-only" versehen.
- Element(e), die nur am Mobilgerät angezeigt werden sollen, mit der CSS-Klasse "mobile-only" versehen.
- Bei Einstellungen / CSS folgenden Code hinzugefügt:Code
Alles anzeigen.desktop-only { display: none; /* Standardmäßig ausblenden */ } .mobile-only { display: block; /* Standardmäßig anzeigen */ } @media (min-width: 768px) { .desktop-only { display: block; /* Anzeigen, wenn Bildschirm breiter als 767px ist */ } .mobile-only { display: none; /* Ausblenden, wenn Bildschirm breiter als 767px ist */ } }An die Experten hier: ist das so legitim? Funktionieren tut es jedenfalls.
-
- Offizieller Beitrag
Ich rate davon ab, anzufangen unterschiedliche Inhalte für unterschiedliche Endgeräte zu pflegen. Das generiert einen Mehraufwand, der eigentlich seit "Responsive Design" nicht mehr notwendig ist. Es wäre vorzuziehen, die Inhalte entsprechend gut aufzuarbeiten, damit es auf den verschiedenen Bildschirmgrößen gut aussieht.
-
Hallo Pete,
es wäre einfacher, wenn du uns verraten würdest auf welcher Seite welches Bild nicht passt.
-
Dein Layout bricht bei 768px um.
Also formulierst du ein media-query:
media screen and (max-width: 768px) {
.zpColumnWidth2 .zpwBild img.singleImage {
width: 150px !important;
display: none !important;
}Da kannst du jetzt ENTWEDER eine Breite für das Bild definieren ODER es ganz ausblenden (nur eine der beiden Zeilen verwenden).
Problem: Das wird sicherlich noch einige andere Bilder auf deiner Seite betreffen.
Du müsstest also bei dem Bild eine css-Klasse einfügen, die müsste dann noch in den Code integriert werden. Dazu müsste ich aber sehen, wo sie im Quellcode landet.
Grundsätzlich gebe ich Stefan recht. Im Einzelfall kann man das mit dem Ausblenden aber machen. Macht ja auch keinen Sinn, wenn auf dem Handy das Bild so klein ist, dass man eh nichts mehr erkennt.
-
- Offizieller Beitrag
Die Bildinhalte kann ich ja auch auf dem Desktop nicht lesen. Ich sehe aber, was mich als PDF-Download erwartet (ein Datenblatt). Aber das sehe ich auch auf einem kleinen Bildschirm. Für mich kein Grund das Bild auszublenden.
Der Text "Details als PDF downloaden: ", das Bild und dann noch der Button "PDF downloaden" scheint mir aber etwas übertrieben. Entweder der Text oder der Button könnten weg. Ggf. das PDF-Icon im Bild noch etwas vergrößern.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
