Mobile Ansicht wie einstellen?

Thema wurde von liliope.com, 3. Oktober 2018 erstellt.

  1. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    Kann mir bitte wer helfen,

    In der Desktop Ansicht schaut alles gut aus aber bei der Mobilen Ansicht sind die Content Bilder Groß und gehe über den Rand und der Index ist zu Schmal obwohl noch freie fläche vorhanden ich will das alles auf den vollen Bildschirm eines Mobilen Handys perfekt ausschaut. Wie kann ich das machen per CSS Code oder nur mit dem Styleeditor etwas ändern.

    Danke im voraus!

    Shop: www.liliope.com
     
  2. hartwigbusse

    hartwigbusse Erfahrener Benutzer

    Registriert seit:
    10. Dezember 2014
    Beiträge:
    1.161
    Danke erhalten:
    254
    Danke vergeben:
    420
  3. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    super hat geklappt aber jetzt habe ich bei der desktop ansicht ein problem die bilder sind jetzt untereinander...ich habe nur einen Content Element benutzt mit vier bildern in der Textbeschreibung die ich selbst geordnet habe...wie mach ich es jetzt so das zwei kategorie bilder nebeneinander und die anderen zwei unter denen ist.

    siehe Onlineshop
     
  4. hartwigbusse

    hartwigbusse Erfahrener Benutzer

    Registriert seit:
    10. Dezember 2014
    Beiträge:
    1.161
    Danke erhalten:
    254
    Danke vergeben:
    420
    Ich bin mir nicht ganz sicher, aber wenn du auf Quellcode gehst sollte der Code über jedes Bild.
    Probier mal, <div class="col-sm-6">
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Nicht ganz :)

    Code:
    <div class="row">
    <div class="col-md-6">
    Hier kommt das erste Bild
    </div>
    <div class="col-md-6">
    Hier kommt das zweite Bild
    </div>
    </div>
    Dann sind auf dem PC 2 Bilder nebeneinander
     
  6. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    Danke euch beiden aber nach dem ich es so eingestellt habe sieht es jetzt in der Mobilen Ansicht jetzt wie auf dem bild das ich hier hochgeladen habe. Wie kann ich es wieder anpassen.

    Danke jetzt schon für eure hilfe
     

    Anhänge:

  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Versuche es mal so:
    Code:
    <div class="row">
    <div class="col-xs-12 col-md-6">
    Hier kommt das erste Bild
    </div>
    <div class="col-xs-12 col-md-6">
    Hier kommt das zweite Bild
    </div>
    </div>
     
  8. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    Ich kopier mal den Content Code hier vielleicht mach ich da was falsch...es zeigt wie auf dem bild ich wills aber untereinander bei mobiler ansicht...

    Code:
    <div class="row">
    <div class="col-xs-12 col-md-6">
    &nbsp;<a href="http://liliope.at/MINI/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_0-3MONATE.jpg" /></a>&nbsp; <a href="http://liliope.at/BABYJUNGEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_AB3monate_JUNGEN.jpg" /></a>
    </div>

    <div class="col-xs-12 col-md-6">
    &nbsp;<a href="http://liliope.at/BABY-MAeDCHEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_Ab3monate_MADCHEN.jpg" /></a>&nbsp; <a href="http://liliope.at/BABY-DECKEN-EXCLUSIVE/" target="_self"><img alt="" class="img-responsive" src="images/deckenexklusive.jpg" /></a>
    </div>
    </div>
     

    Anhänge:

  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    "col-xs-12" = auf kleinen Monitoren über die ganze Breite (Smaertphone, Tablet Portrait)
    "col-md-6" = auf größeren Monitoren über die halte Seite (tablet Landscape, Notebook, PC)

    Eigentlich sollte er also machen, was Du möchtest.

    Das ist Dein Code:
    HTML:
    <div class="row">
        <div class="col-xs-12 col-md-6">
            &nbsp;<a href="http://liliope.at/MINI/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_0-3MONATE.jpg"></a>&nbsp; <a href="http://liliope.at/BABYJUNGEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_AB3monate_JUNGEN.jpg"></a>
        </div>
    
        <div class="col-xs-12 col-md-6">
            &nbsp;<a href="http://liliope.at/BABY-MAeDCHEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_Ab3monate_MADCHEN.jpg"></a>&nbsp; <a href="http://liliope.at/BABY-DECKEN-EXCLUSIVE/" target="_self"><img alt="" class="img-responsive" src="images/deckenexklusive.jpg"></a>
        </div>
    </div>
    Ändere das mal in:
    HTML:
    <div class="row">
        <div class="col-xs-12 col-md-6">
            &nbsp;<a href="http://liliope.at/MINI/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_0-3MONATE.jpg"></a>
        </div>
    
        <div class="col-xs-12 col-md-6">
            &nbsp;<a href="http://liliope.at/BABY-MAeDCHEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_Ab3monate_MADCHEN.jpg"></a>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-6">
            &nbsp; <a href="http://liliope.at/BABYJUNGEN/" target="_self"><img alt="" class="img-responsive" src="images/Kategoriebild_AB3monate_JUNGEN.jpg"></a>
        </div>
    
        <div class="col-xs-12 col-md-6">
            &nbsp; <a href="http://liliope.at/BABY-DECKEN-EXCLUSIVE/" target="_self"><img alt="" class="img-responsive" src="images/deckenexklusive.jpg"></a>
        </div>
    </div>
    
     
  10. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    #barbara

    Leider hat sich trotz deinem neuen Code nichts geändert. Was mach ich falsch oder woran kann es liegen.
    Ich möchte es genau so wie bei diesem Onlineshop machen www.ankerwelt.com. Die Mobileansicht soll genau wie du es sagst über die ganze breite sein...

    Bitte hilf mir möchte demnächst Werbung für meine Seite schalten und will dieses Problem so schnell wie möglich lösen..

    Danke dir jetzt schon für deine Hilfe...
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Dein Shop nimmt das col-md-6 vorrangig....
    Versuche es mal mit
    col-xs-12 col-sm-6
     
  12. liliope.com

    liliope.com Mitglied

    Registriert seit:
    18. Oktober 2017
    Beiträge:
    21
    Danke erhalten:
    0
    Danke vergeben:
    19
    Du bist klasse hat geklappt dankeeee :)
    dieser Thread kann als gelöst makiert werden :)
     
  13. R.T

    R.T Erfahrener Benutzer

    Registriert seit:
    8. Januar 2012
    Beiträge:
    67
    Danke erhalten:
    2
    Danke vergeben:
    17
    Hallo, ich möchte im Index 4 Bilder anzeigen, 2 nebeneinander und darunter zwei, wie im Shop von liliope.com. Diese sollten in der Desktop Ansicht korrekt nebeinander angezeigt werden, und in der mobilen Version dann untereinander.
    Leider sind diese in der Desktop Ansicht riesig groß, wenn ich beim Bild img-responsive eingebe.
    Was mache ich falsch? Vielen Dank für eure Hilfe ;) Gambio Version: v3.10.0.3
     
  14. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    schau dir mal im Testshop 2 -> "Freier Inhalt 3" an... das kannst du 1:1 übernehmen...
     
  15. R.T

    R.T Erfahrener Benutzer

    Registriert seit:
    8. Januar 2012
    Beiträge:
    67
    Danke erhalten:
    2
    Danke vergeben:
    17
    Vielen Dank, funktioniert leider nicht. Bilder werden dann untereinander angezeigt
     
  16. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    poste mal den Quellcode... und einen Link zum Patienten...
     
  17. R.T

    R.T Erfahrener Benutzer

    Registriert seit:
    8. Januar 2012
    Beiträge:
    67
    Danke erhalten:
    2
    Danke vergeben:
    17
  18. ReneT

    ReneT Erfahrener Benutzer

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    das hilft jetzt aber nicht...

    Poste mal den Quellcode welchen du ohne erfolg getestet hast... (siehe Post #14)
     
  19. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Teaser-Slider zeigt immer ein Bild. Wenn Du da 2 Bilder nebeneinander haben möchtest, musst Du ein Bild mit 2 Motiven erstellen

    Bei liliope.com ist es nicht im Slider, sondern einfach so auf der Startseite
     
  20. R.T

    R.T Erfahrener Benutzer

    Registriert seit:
    8. Januar 2012
    Beiträge:
    67
    Danke erhalten:
    2
    Danke vergeben:
    17
    ja, das wollte ich auch so, im Freier Inhalt 1.
    Im Teaser ist jetzt nur eine Notlösung, so wie es jetzt dargestellt wird. Möchte es so wie bei z.B.liliope.com, bekomme es aber nicht hin