Bilder auf der Startseite nebeneinander - Handy?

Thema wurde von dennis_auwarter, 25. Februar 2022 erstellt.

  1. dennis_auwarter

    dennis_auwarter Mitglied

    Registriert seit:
    22. Juni 2021
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    3
    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
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    1. September 2012
    Beiträge:
    2.422
    Danke erhalten:
    417
    Danke vergeben:
    157
    Dann wären die Bilder aber arg klein auf dem Handy.
     
  3. dennis_auwarter

    dennis_auwarter Mitglied

    Registriert seit:
    22. Juni 2021
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    3
    Das stimmt, aber ich denke groß genug. Würde es zumindest gern vesuchen
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    #6 Anonymous, 25. Februar 2022
    Zuletzt bearbeitet: 25. Februar 2022
    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.
     
  7. dennis_auwarter

    dennis_auwarter Mitglied

    Registriert seit:
    22. Juni 2021
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    3
    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>
    &nbsp;
    </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>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://shop.streetperformance-engineering.de/bike-s/"><span style="font-size:24px;">Bike Parts</span></a>
    </p>
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    #9 Anonymous, 26. Februar 2022
    Zuletzt bearbeitet: 26. Februar 2022
    @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:
    [​IMG]
     
  10. dennis_auwarter

    dennis_auwarter Mitglied

    Registriert seit:
    22. Juni 2021
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    3
    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!
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    Kopier den Code oben und setz ihn nochmal ein, hab ihn korrigiert.

    Würde ich auch empfehlen.
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  13. Sportler

    Sportler Aktives Mitglied

    Registriert seit:
    1. November 2020
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    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
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Der Code wird im quellcode-midus des Texteditors eingegeben. Das geht auch in der Cloud
     
  15. Sportler

    Sportler Aktives Mitglied

    Registriert seit:
    1. November 2020
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    #15 Sportler, 26. Februar 2022
    Zuletzt bearbeitet: 26. Februar 2022
    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 />
        &nbsp;
    </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;" /> &nbsp; &nbsp;&nbsp; </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> &nbsp;&nbsp; &nbsp; <a href="https://www.alexsports-shop.de/kategorie-3/inline-skates-protektoren/" target="_self"><img alt="" src="images/Protektoren.png" /></a><br />
    <br />
    <br />
    &nbsp;
     
  16. Sportler

    Sportler Aktives Mitglied

    Registriert seit:
    1. November 2020
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    Danke, hoffe es ist jetzt richtig.
     
  17. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.675
    Danke erhalten:
    878
    Danke vergeben:
    288
    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.
     
  18. Sportler

    Sportler Aktives Mitglied

    Registriert seit:
    1. November 2020
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17

    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?
     
  19. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.675
    Danke erhalten:
    878
    Danke vergeben:
    288
    Lies Dir das nochmal durch was ich geschrieben habe. Da steht wirklich alles drinn.