Content so erstellen, dass er für Tablet, Smartphone und Desktop passt

Thema wurde von Anonymous, 28. Juni 2016 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    4. Mai 2016
    Beiträge:
    85
    Danke erhalten:
    16
    Danke vergeben:
    36
    Hallo ihr lieben Leut

    Jaaaa schon wieder ich. (Wehe ihr führt mal eine anti Spamdanifragestellfunktion ein)

    Ihr kennt vermutlich alle das Problem, dass ich euch hier schildere.

    Ich habe im Gambio Admin "Contentmanager" eine Contentseite erstellt, um etwas zu beschreiben:

    (Bild: PNG, Auflösung 500*285)
    upload_2016-6-28_14-16-37.png

    Wenn ich mir dies im Desktop betrachte, sieht das so aus (Man achte auf das Bild):
    upload_2016-6-28_14-17-6.png

    Wenn ich jetzt aber in die Mobile Ansicht wechsle im StyleEdit3, dann sieht das so aus:
    upload_2016-6-28_14-17-45.png

    Also das Bild kommt über den Rand hinaus, weil es nicht wie der Text responsive ist.

    Das Bild in ein kleines Format verändern ist sicherlich keine Lösung, weil es dann auf dem Desktop doof aussieht.

    Wie ist euer Vorgehen hier? Wie schafft ihr es eine Seite auf Tablet (liegend und gerade), Mobile (liegend und gerade) und auf dem Desktop korrekt anzuzeigen? Was ist euer Geheimnis?

    Ihr seid sicherlich auch alle über diese Probleme gestolpert, helft mir doch bitte wieder hoch.

    Lieber Gruss Dani
     
  2. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Du musst dem "<Img" die - class="img-responsive" - zuweisen, dann sollte das klappen.
     
  3. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Du musst den Bilder sagen wie groß sie sein sollen. z.b. durch Prozentwerte bei der breite oder Höhe.
    oder dich weiter mit css und html5 beschäftigen. am einfachsten wäre aber erst mal die ANgabe in prozenten

    z.b.
    Code:
    img {
        width: 90%;
        height: auto;
    }
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    4. Mai 2016
    Beiträge:
    85
    Danke erhalten:
    16
    Danke vergeben:
    36
    Habe das gerade versucht, das mit dem 90% klappte nicht so ganz, weil dann hatte er mir das Smiley riesengross gemacht.

    In dem Fall müsste ich ein Mediaqueries erstellen und genau definieren, was für wo gilt

    Sieht nach trockener Lesekost aus :eek:) (Link nur für registrierte Nutzer sichtbar.)

    Besten Dank für eure Tipps

    Dani
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    7. April 2014
    Beiträge:
    174
    Danke erhalten:
    8
    Danke vergeben:
    48
    Wenn das Bild über die komplette Seite gehen soll dann sollte es andere Maße bekommen. Die Shopbreite steht normal auf 1200px.
    Probier mal das Bald auf die Maße von ca. 1190 x 285 px zu bekommen.

    Dann schreibst Du den Text der Oberhalb des Bildes sein soll. Danach probiert Du mal diesen Code:

    <img class="img-responsive space-1" data-image="XXXXXX" data-image-lg="XXXXXX" data-image-xs="XXXXXX" src="XXXXXXX" /><br />
    &nbsp;

    Die XXXXXX ersetzt Du mit dem Pfad zu Deinem Bild. Danach einfach mit dem Text weitermachen.

    Bevor Du alles schreibst, erst mal mit etwa Text testen.