Hallo zusammen, ich habe das Problem dass ich auf der Startseite zwei Bilder nebeneinander habe und die auf der Handyansicht untereinander sind. Hätte sie aber gerne auf dem Handy auch nebeneinander. Ich habe hier immer wieder gelesen man solle die Bilder img-responsive klassifizieren, wenn ich das tue sind sie aber auch auf dem PC untereinander .. Hat vielleicht jemand einen Tip? www.shop.streetperformance-engineering.de
Man macht keine Leerzeichen dazwischen, so verschiebt sich das Mobil Du hast eine Spalte und dort die Bilder mit Unterschrift darin, besser wären 2 Spalten, dann kannst du die Bilder auch responsiv (und ohne Größenangaben) einstellen. mit einem col-xs-6 in der Classe könnte das auch Mobil nebeneinander stehen - ist aber ungetestet.
Ich nehme das meiste zurück - das ist ja noch ein Template. Du solltest auf ein Theme wechseln - Templates werden ab der Shopversion 4.5 nicht mehr unterstützt.
Im Grunde ist es einfach. Code: .deineklasse { white-space: nowrap; } Das würde glaube ich auch mit img-responsive zusammen funktionieren. Es gibt da aber ein anderes Problem. Auch die zwei Beschreibungen z.B. "Quad Part", die unter den Bildern sind, müssen mit der selben Eigenschaft versehen werden. Und davon abgesehen müssen die Margin bzw. Padding Werte (oder die Leerzeichen, was auch immer da für den Abstand sorgt) dann zusätzlich weg, da sonst trotzdem die Begriffe verschoben angezeigt werden, wenn auch nicht mehr untereinander. Die Abstände zwischen den Bilden dürfen auch kleiner sein. Und damit das dann nur bei Mobilgeräten so angezeigt wird einfach folgendermaßen gebrauchen. z.B. Code: @media (max-width:767px) { .deineklasse { white-space: nowrap; } } Übrigens: Du musst noch die Gridspalten-Größe ändern (verkleinern) für Tablets, da dein Miniwarenkorb-Logo nach unten rutscht. Einfach z.B. die Größe der Suche oder "freigestaltbarer Bereich" kleiner machen. Das funzt nicht. Bei mir zumindest nicht. Werden dann trotzdem untereinander angezeigt. Also an der White-Space Eigenschaft führt meines Wissens kein Weg vorbei.
Vielen Dank erstmal für die Hilfe, auch wenn sie mich bisher noch nicht weiter bringt.. Ich bin kein Programmierer und kann mit den Codes leider nichts anfangen, wo genau muss ich die denn einfügen? Bei mir sieht das aktuell so aus: <p> </p> <p style="text-align: center;"> <a href="https://shop.streetperformance-engineering.de/quad-parts/"><img alt="" height="245" src="images/08_SP_Tuning_janine-kyofsky-fotografie FÜR SHOP 3.jpg" width="351" /></a> <a href="https://shop.streetperformance-engineering.de/quad-parts/"><img alt="" height="245" src="images/Screenshot 2022-02-13 at 11-01-04 JayBe ( jay_bathos) • Instagram-Fotos und -Videos.png" width="355" /></a> </p> <p style="text-align: center;"> <a href="https://shop.streetperformance-engineering.de/quad-parts/"><span style="font-size:24px;">Quad Parts</span></a> <a href="https://shop.streetperformance-engineering.de/bike-s/"><span style="font-size:24px;">Bike Parts</span></a> </p>
Du bastelst jetzt am Template - das hällt bis zum nächsten Update - und dann fängst Du von forne an, weil Du dann auf das Theme umstellen musst. Im Theme (die Umstellung von Tamplate Honeygrid auf Theme Honeygrid geht fast mit einem Klick) gibt es Widgets, mit denen das viel einfacher geht, als so im Template, weil du spalten erstellen und mit Bildern und Texten oder Artikeln füllen kannst. Ganz grob für das Template (ungetestet): <div class="row"> <div class="col-xs-6"> <a href=" hier dein code für das Bild und den Link..."></ br> <span style="text-align: center;">Dein Text</span> </a> </div> <div class="col-xs-6"> <a href=" hier dein code für das Bild und den Link..."></ br> <span style="text-align: center;">Dein Text</span> </a> </div> </div> Kann sein, dass noch ein div dazu muss, oder ein Style... kann ich so aus dem Kopf nicht sagen
@dennis_auwarter , lösch deinen Code mal komplett raus und ersetze ihn durch folgenden: Code: <center> <div style="text-align:center; display:inline-flex;"> <figure> <a href="https://shop.streetperformance-engineering.de/quad-parts/"><img style="padding: 0px 20px" class="img-responsive" src="https://shop.streetperformance-engineering.de/images/08_SP_Tuning_janine-kyofsky-fotografie FÜR SHOP 3.jpg" alt="Quad Parts" height="285" width="412" /></a><br /><a href="https://shop.streetperformance-engineering.de/quad-parts/"><span style="font-size:24px; padding: 0px 20px;">Quad Parts</font></a></figure> <figure> <a href="https://shop.streetperformance-engineering.de/bike-s/"><img style="padding: 0px 20px" class="img-responsive" src="https://shop.streetperformance-engineering.de/images/Screenshot 2022-02-13 at 11-01-04 JayBe ( jay_bathos) • Instagram-Fotos und -Videos.png" alt="Bike Parts" height="285" width="418" /><br /><a href="https://shop.streetperformance-engineering.de/bike-s/"><span style="font-size:24px; padding: 0px 20px;">Bike Parts</font></a></figure> </div> </center> Da ist img-responsive bereits drin, wird jetzt auch mobil nebeneinander angeordnet sein und sieht dann so aus:
Der Code funktioniert, vielen Dank! Nur sind bei mir die Bilder direkt aneinander Werde, wenn ich mal dazu komme, aber trotzdem auf ein Theme umstellen.. Danke euch beiden!
versuche mal, wenn Du aus dem einen <div class="col-xs-6"> ein <div class="col-xs-6" style="padding-left: 10px;"> und aus dem Anderen ein <div class="col-xs-6" style="padding-right: 10px;"> oder bei beiden ein <div class="col-xs-6" style="padding: 10px;"> machst.
Moin. Ich würde mich hier mal kurz mit einklinken. Ich habe das gleiche Problem, arbeite schon mit img-responsive was mir dann natürlich ein paar Bilder untereinander setzt. Mein Problem dabei ist sicher das ich einen Cloudshop nutze und nichts am Code ändern kann. Gibt es dafür andere Lösungen ? https://www.alexsports-shop.de Vielen Dank
Wo finde ich den? Oder einfach auf der Seite den Seitenquellcode anzeigen lassen ? Kann man den dort bearbeiten dann? EDIT: Jaaaa ich habe es gefunden. An welche Stelle genau kommt der Code jetzt hin? Bei mir sieht es aktuell so aus mit img-responsive Code: <div style="text-align: center;"> <a href="https://www.alexsports-shop.de/specials.php" target="_self"><img alt="" class="img-responsive" src="images/Sale.png" /></a><br /> <br /> <br /> <a href="https://www.alexsports-shop.de/kategorie-1/Schlittschuhe/" target="_self"><img alt="" class="img-responsive" src="images/Schlittschuhe Front.png" /></a><br /> <br /> </div> <a href="https://www.alexsports-shop.de/kategorie-1/Ski-Snowboardbrillen/" target="_self"><img alt="" src="images/Snowboardbrillen.jpg" style="height: 372px; width: 560px;" /> </a><a href="https://www.alexsports-shop.de/kategorie-1/ski-snowboardhelme/" target="_self"><img alt="" src="images/pic 2 (1).png" style="height: 373px; width: 560px;" /></a><br /> <br /> <br /> <a href="https://www.alexsports-shop.de/bikeshop/helme/" target="_self"><img alt="" src="images/Helme1.png" /></a> <a href="https://www.alexsports-shop.de/kategorie-3/inline-skates-protektoren/" target="_self"><img alt="" src="images/Protektoren.png" /></a><br /> <br /> <br />
Links sollte man auch immer relativ zum Shoproot angeben. Dann passen die z.B. auch wenn man mal einen Testshop erstellt. In diesem Fall ist der vordere Teil "https://www.alexsports-shop.de" grundsätzlich überflüssig.
Kannst du mir das vielleicht genauer erklären? Ich bin ein Laie auf dem Gebiet allgemein. Aber das ändert auch nichts an der Darstellung der Bilder dann oder?