Hallo zusammen,

Design: Rome, interessiert mich aber generell für alle Designs.

1. Ich füge ein Bild hinzu (zb. 1920px x 1200 px)

2. Per CSS ziehe ich es auf die volle breite
zb so:

/* full width image */

#cc-m-7576891111 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
}

#cc-m-7576891111 img {
width: 100vw;
height: auto; !important;
}

3. mobil hat es jetzt die passende größe und füllt zb. den halben bildschirm aus

4. Am Desktop ist die Höhe aber natürlich riesig

5. Da es mir am Desktop zu hoch ist, habe ich bisher schlichtweg das Bild vorab in der Höhe reduziert. Also zb. einen Auschnitt daraus gemacht. (1920pc x 400 px)

6. Jetzt sieht es am Dekstop super aus. Volle breite und in der Höhe ist nur der halbe Bildschirm gefüllt.

7. Mobil wird dies natürlich angepasst, und das Bild ist ein kleiner schmaler streifen.

soviel vorab...

Ich suche eine Lösung, dass ich ein Bild zb 1920px x 1200px auf die volle breite ziehen kann, damit es mobil auch diese größe hat. Ich für Desktop aber den einen Auschnitt in der Höhe begrenzen kann. Denn ein schmaleres Bild hochladen führt wie oben beschrieben nicht zum erfolg, da dann lediglich am Desktop Ergebnis optimal ist, aber mobil das bild einfach zu schmal wird.

Jemand eine Idee?

Danke und liebe Grüße!

Hi AZ,

erstes Feedback: Abstandselement ausprobiert. Schick für desktop, unbrauchbar für mobil?.... denn dort ist ein Abstand ja immer identisch groß (nämlich 5mm gefühlt) - oder denke ich falsch?

Spaltenelement wird nun als nächstens Versucht.

bzgl: PS: für die Fullwidth-Darstellungen auf https://redesign-animation.jimdofree.com...dth-animations/ gibt es ein Widget - da muss dann nichts programmiert werden.

... das verstehe ich nicht ^^ wo gibt es ein fertiges Widget hierfür? Wobei es sich bei der Ansicht ja genau um mein Problem handelt. Schick für Mobil, riesig für Desktop

Es muss mir also irgendwie gelingen, dass das Bild komplett mobil angezeigt wird, und ich am Desktop den Auschnitt wählen kann.

BG

BG

Hi Az,

danke für deinen regelmäßigen input! Ich "kaufe" deine Diensleitung nicht weil ich zu geizig bin, sondern weil ich die Herausforderungen Stück für Stück meistern möchte.
Das du hier überhaupt supportest finde ich mega!

Vorerst ist es mir nun gelungen einen Parallaxeffekt zu hinterlegen der seinen zweck erfüllt. Dennoch versuche ich mit nun an dem Abstand noch mal und dem Spaltenelement.

Step für Step verstehe ich den ganzen spass :)

Vielen Dank!

Eine Alternative wäre folgende:
Füge ein Bild ein, das auf dem Destkop passt, dann darunter das gleiche Bild (normale Breite ) , das mobile passt, also in zwei Höhen. Dann kannst du die Bilder ein/ausblenden mit folgendem Code im Head:

<style type="text/css">
/*<![CDATA[*/

/* normale Ansicht */

@media (min-width: 768px) {

/* elemente Destkop */

#cc-m-xxxxxxxxxx { display:none; }
#cc-m-oooooooooo { }


/* mobile Ansicht */ }

@media (max-width: 768px) {

/* Elemente Mobil */

#cc-m-oooooooooo { display:none; }
#cc-m-xxxxxxxxxx { }

/*]]>*/
</style>

ich hatte mal eine Testseite erstellt, ohne realen Inhalt, wo ich auf der Startseite so mehrere Element ein/ausgeblendet habe.

Dank dir! Das hatte ich auch schon überlegt per mobil auslbenden. Vorerst werde ich glaube ich per Parallax arbeiten und lege per css die größe für mobil fest, das klappt bisher ganz gut.
Aber das ist ebenfalls eine gute alternative!

BG

Ich hatte hier bisher "scoll" für mobile gesetzt, damit das Scollen am Handy deaktiviert ist.

das mit dem ein/ausblenden ist so eine ( Bastel- ) Sache, wie auch das scrollen.
Ich setzte voll auf Webkeeper, hat einen der tollsten Baukasten im Angebot, inkl. Hosting nur Fr. 15.-- monatlich, da ist Jimdo um Lichtjahre hinterher, da kommt nicht mal WIX nach.