Mobile Ansicht wie einstellen?

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

 

Schau mal hier, https://www.gambio.de/forum/threads/bild-geht-ueber-den-rand.33360/#post-273553

Das von Barbara #4

 

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

 

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">

 

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

 

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

 

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>

 

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>

 

"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>

 

#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...

 

Dein Shop nimmt das col-md-6 vorrangig....
Versuche es mal mit
col-xs-12 col-sm-6

 

Du bist klasse hat geklappt dankeeee
dieser Thread kann als gelöst makiert werden

 

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

 

schau dir mal im Testshop 2 -> "Freier Inhalt 3" an... das kannst du 1:1 übernehmen...

 

Vielen Dank, funktioniert leider nicht. Bilder werden dann untereinander angezeigt

 

poste mal den Quellcode... und einen Link zum Patienten...

 

Hier der Patient https://www.lange-damenhosen.de/ was du da jetzt, siehst ist ein Bild im Teaser Slider

 

das hilft jetzt aber nicht...

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

 

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

 

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