Anderes Bild bei Desktopansicht wie bei mobiler Ansicht möglich? 
Autor: Siegbert G.
Besucht 93,
Followers 1,
Geteilt 0
Ein Kunder von mir hat einen Text mit einem farbigen Hintergrund als Bild geschickt.
Natürlich ist der Text bei der mobilen Ansicht so verkleinert, dass er kaum mehr gelesen werden kann.
Nun hat er mir ein zusätzliches Bild miteinem größerenText geschickt, welches ich in der mobilien Ansicht verwenden soll.
Ist die Verwendung von 2 unterschiedlichen Bildern möglich? Ich habe es über Aus-und Einblenden versucht, habe es aber nicht hinbekommen. Ich habe ihm vorgeschlagen, dass ich das Projekt als Text einfüge und im Stil einen Farbhintergrund mache. So bleibt der Text in der mobilen Ansicht lesbar.
Habt ihr eine andere Idee ohne zusätzlichen Code?
Gepostet am
Verschiedene Bilder ein- und auszublenden ist wohl nur im Header und Footer möglich.
Die Bilder im Raster können über "Responsiv" offenbar nur ausgeblendet werden.
Gibt es einen besonderen Grund beim Kunden, dass er Texte als Bild schickt?
Autor
Der Kunde möchte, dass es so aussieht wie er es sich vorstellt. Aber ich versuche es mit Text nachzubauen.
(It > De) .... diese Idee von mir lässt sich auf jedes Objekt und jeden gewünschten Effekt anwenden...
...in meinem Beispiel mit zwei Bildern, die sich bei 720px abwechseln:
> Hybrid >> https://kolasim.websitex5.me/mostra-nascondi/ibrido.html
> Alles Extra >> https://kolasim.websitex5.me/mostra-nascondi/tutto-extra.html
.
ciao
.
Der Vorschlag von KolAsim ist ganz einfach mit etwas CSS-Code umzusetzen - ein guter Tipp.
Autor
Hallo KolAsim, vielen Dank.
Kannst du mir biite den Code hier als Text einfügen, dann kann ich ihn kopieren und muss ihn nicht neu schreiben.
Habe es nicht so mit Sonderzeichen.
Autor
Hallo KolAsim,
mir fehlt bei deinen Screenshots leider der Durchblick.
Kannst du eine Reihenfolge angeben?
Hier der CSS-Code zum Kopieren, siehe
----- CSS-Code, um das große Bild ausblenden -----
@media (max-width: 720px) {
#imObjectImage_101_02 { display: none; }
}
----- CSS-Code, um das kleine Bild ausblenden -----
@media (min-width: 720px) {
#imObjectImage_101_03 { display: none; }
}
---------------------
Wichtig:
Die Zahlen 101_02 und 101_03 sind unterschiedlich je nach Nutzer und Bild-Objekt.
Die Zahlen übernehmen, die beim markierten Bild-Objekt bei Klick auf "Code" angezeigt werden.
Die Reihenfolge der beiden Bildern, also ob zuerst das große oder das kleine Bild kommt, das ist egal.
Autor
Super - es hat geklappt!!
Meine Testseite, siehe
>> https://findelinks.de/123test-aufklappmenue-2/anderes-bild-bei-kleinem-bildschirm.html
Anmerkung zum Screenshot unten:
Die Zahlen 02 und 03 sind im Gegensatz zum CSS-Code oben getauscht - nicht irritieren lassen.
Wichtig ist, dass die Zahlen beim CSS-Code mit den Angaben bei "Objekt-ID" zusammen passen.
Und wenn die beiden Bilder falsch angezeigt werden, dann bei beiden min mit max vertauschen.
-----
... + ... noch einfacher, leichter und direkter:
> Experte>> https://kolasim.websitex5.me/mostra-nascondi/expert.html
Code:
<style>
@media (max-width: 720px){ /** Ausblenden oberhalb von 720px **/
#imCell_1 {display:none;}
}
@media (min-width: 720px){ /** Ausblenden unterhalb von 720px **/
#imCell_5 {display:none;}
}
</style>
.
ciao.