gelöst Startseite - mehrere Bilder nebeneinander

Guten Tag, ich kämpfe schon seit Stunden damit rum zwei Bilder nebeneinander hin zu bekommen:

siehe Shop: (Link nur für registrierte Nutzer sichtbar.)

Bei beiden Bildern habe ich die Größen raus genommen und nur das "img-responsive" stehen - denn egal wie, bei der mobilen Version verzerrt es IMMER in die Höhe (auch bei den Überschriften der Startseite)
Ich habe schon alle erdenklichen Größen der Bilder ausprobiert, das Problem habe ich auch bei kleineren Bildern.

In Zukunft möchte ich auch mal 3 Bilder nebeneinander auf der Startseite haben, wo soll das denn enden haha

Allgemein habe ich das Problem dass ich die Überschriften "Empfehlungn, SALE und NEW" in der mobilen Version gerne kleiner hätte! Aber das skaliert immer so blöd das es dann auf dem Dektop ZU klein ist wenn es in der mobilen Version passt! Ich finde allgemein alle Skalierungen in der mobilen Version sehr unpassend und bin sehr unzufrieden mit der Lösung für das Handy! Sobald ich irgendwelche Größen angebe und DENNOCH "img-responsive" stehen habe verzerrt es sowohl die Bilder als auch die Überschriften jeweils extrem in die Höhe!

Hat mir jemand einen Tip?

 

Ich glaube der Blog-Artikel von mir hier könnte dir da weiterhelfen: https://www.gambio.de/blog/gambio-tutorials-eigene-contents-erstellen/

 

Oh wow das ist ja viel Kontent aber leider vestehe ich von HTML und CSS rein gar nichts. Ich habe gerade so ein paar klinigkeiten ändern können per einfachen Anleitungen hier im Forum, und das wars auch schon.

 

Ich finde vieles so schade was Gambio angeht! Wenn man das Shop System wechselt hat man keine Einsicht was genau NICHT Möglich ist. Oder wie kompliziert alles ist und wenn man mal was ändern möchte gleich mit Programmier Kenntnissen arbeiten muss! Viele Sachen sollten einfach Standard einstellbar sein weil es zu einem Shop gehört - vieles sind keine Sonderwünsche sondern Sachen die jedes Shop System haben sollte. Leider habe ich erst vor einem halben Jahr gewechselt...

 

html, css hat nix mit programmieren zu tun.
Gambio bassiert halt auf dem alten XTC Shopsystem und macht nach und nach alles von früher neu und bedienbarer. Vieles Dauert halt seine Zeit wenn die Entwicklerzeit nun mal nur Summe X bietet man aber das 10 fache bräuchte. Gibt leider zu wenig davon.
Die Blog Beiträge sind eigentlich schon so geschrieben, dass es jeder nachbauen kann. Das nun auch alles für verschiedene Monitore und Geräte funktionieren muss macht es einem nicht einfacher.
Was neben dem responsiv auch oft hilft ist mit prozenten statt pixel Werten zu arbeiten. Und wer gestalten will muss halt bischen üben. Nen Seiten-Baukasten (Page-Builder) gibts leider noch nicht, wobei ich das auch cool fände
Du kannst dir aber den Editor auch selbst erweitern mit vielen FUnktionen
(Link nur für registrierte Nutzer sichtbar.)

 

Gehe in den Testshop (ich glaube es ist der 2.) von Gambio, dort in den Content-Manager -> Elemente und öffne die Startseite - Mitte könnte es sein (da könnte auch DEMO stehen)
Das sind 2 Bilder nebeneinander, den Quellcode kopierst du dir und fügst ihn bei dir ein.
Dann änderst Du nur noch die Bildangaben durch Deine eigenen und hast 2 Bilder nebeneinander.

P.S. die Bilder sollten gleich groß sein.

 

Ich habe mich nun an der Anleitung von Dennis rumprobiert und bin schon viel weiter. Leider bekomme ich beide Bilder nicht gleich groß OBWOHL beide gleich groß (619x310px und beide 290kb) sind. Die Positionen sind irgendwie auch nicht wirklich gleichmäßig.

HTML:

<div class="row">
    <div class="col-xs-13 col-md-6">
        <br />
        <img alt="Beispielbild" class="img-responsive" src="images/banner studirabatt 5.png" />
    </div>

    <div class="row">
        <div class="col-xs-13 col-md-6">
            <br />
            <img alt="Beispielbild" class="img-responsive" src="images/banner studirabatt 6.png" />
        </div>
    </div>
</div>

 

Mit dem Code von dem Testshop hat es geklappt! Vielen Dank

 

eine Zeile hat maximal 12 Spalten, nicht 13
Du hast in Deinem Code aber für Handys 13 Spalten angegeben (col-xs-13)
Das hätte zumindest auf einem Smartphone sehr "schräg" ausgesehen.

 

Da hätte tatsächlich nicht wirklich was passieren können, da das Bootstrap CSS mit der Klasse nichts anfangen kann . Vermutlich hätte er dann auch so die volle Breite fürs Bild genommen

 

Ich hatte vermutet, dass das aufgeteilt wird in
12 Spalten
1 Spalte / 11 Spalten
2 Spalten
Wobei dann die Frage wäre, in welchem Teil die Bilder angezeigt worden wären

Aber gut zu wissen, das das wohl nicht passiert. Nur falls man sich mal vertippt ....

 

Nein so dynamisch ist Bootstrap dann auch nicht . Das bewegt sich da einfach nur in dem Bereich von 1 bis 12 Spalten, mehr ist da nicht definiert

 

Nun hab ich ein erneutes Problemchen und wäre sehr dankbar für einen kleinen Tipp wie ich das Lösen könnte...
ich hab etwas rumprobiert und bin ganz stolz dass ich es mit HTML überhaupt geschafft habe die zwei untern Bilder nebeneinander zu bekommen . Denn wenn ich einfach den Code der zwei oberen Bilder kopiert habe, war ein Bild in der 2ten Zeile und das andere in der dritten.

Nun sind die zwei Bilder aber irgendwie aus was einem Grund auch immer etwas kleiner skaliert wie die oberen zwei Bilder... was kann man da tun?

HTML:

<div class="row space-1">
    <div class="col-xs-12 col-sm-6 space-1">
        <br />
        <a href="/shop4/Haus---Garten/Moebel---Wohnen/Dekoration/"><img class="img-responsive" src="images/banner studirabatt 5.png" /></a>
    </div>

    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/banner studirabatt 6.png" /></a>
    </div>

    <div class="col-md-12">
        <div class="col-xs-12 col-sm-6">
            <br />
            <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/versandkosten frei.jpg" /></a>
        </div>

        <div class="col-xs-12 col-sm-6">
            <br />
            <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/studio vertrag_1.jpg" /></a>
        </div>
    </div>
</div>

 

Dein HTML ist nicht ganz richtig. Versuchs mal damit:

HTML:

<div class="row space-1">
    <div class="col-xs-12 col-sm-6 space-1">
        <br />
        <a href="/shop4/Haus---Garten/Moebel---Wohnen/Dekoration/"><img class="img-responsive" src="images/banner studirabatt 5.png" /></a>
    </div>

    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/banner studirabatt 6.png" /></a>
    </div>
</div>

<div class="row space-1">
    <div class="col-xs-12 col-sm-6 space-1">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/versandkosten frei.jpg" /></a>
    </div>

    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/studio vertrag_1.jpg" /></a>
    </div>
</div>

Du hattest in der zweiten Zeilen um die beiden Spalten noch ein "col-md-12" herumgelegt, das fügt links und rechts noch einen zusätzlichen Abstand ein, wodurch die beiden unteren Bilder weniger Platz haben und kleiner skaliert werden.

 

Perfekt !!! ich hab nur hier
<div class="col-xs-12 col-sm-6 space-1">

bei beiden die space-1 raus gemacht da der absatz dadurch größer wurde zu den unteren Bildern.

Ich danke vielmals!!

 

Ich habe mal wieder einiges Probiert aber komme wieder nicht weiter

Ich würde gerne für den Index Mitte 3 Bilder nebeneinander einfügen damit ich damit eine übersichtliche Kategorie mit Bildern machen kann quasi. Mit den 2 Großen Bildern nebeneinander sieht das recht unübersichtlich aus.

Könnte mir da jemand mit dem Code helfen?

Das ist der Code derzeit für die Bilder wie auf dem Bild zu sehen. Ich hätte diese gerne keiner Skaliert sodass jeweils 3 ein eine Reihe passen

HTML:

<div class="row space-1">
    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="/shop4/Haus---Garten/Moebel---Wohnen/Dekoration/"><img class="img-responsive" src="images/all effect gels.jpg" /></a>
    </div>

    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/de/colourgele/effektgele/gold-rush/"><img class="img-responsive" src="images/gold durst.jpg" /></a>
    </div>
 
</div>

<div class="row space-1">
    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/banner studirabatt 5.png" /></a>
    </div>

    <div class="col-xs-12 col-sm-6">
        <br />
        <a href="https://www.justnails-shop.de/specials.php"><img class="img-responsive" src="images/studio vertrag_1.jpg" /></a>
    </div>
</div>

 

Und gibt es noch irgendwo eine für mich verständliche Anleitung wie man solche Bilder animieren kann wie in dem Testshop? Zum Beispiel dass wenn man mit der Maus drauf geht, das jeweilige Bild etwas größer wird?

 

Wenn Du 3 bilder neben einander haben möchtest, musst Du auch 3 Bilder in ein
<div class="row space-1">
packen, und die Größen (col-Werte) entsprechend anpassen.

HTML:

<div class="row space-1">
    <div class="col-xs-12 col-sm-4">
        <br />
        <a href="/hier der erste Link/"><img class="img-responsive" src="images/hier das erste Bild" /></a>
    </div>

   
<div class="col-xs-12 col-sm-4">
        <br />
        <a href="/hier der zweite Link/"><img class="img-responsive" src="images/hier das zweite Bild" /></a>
    </div>

<div class="col-xs-12 col-sm-4">
        <br />
        <a href="/hier der dritte Link/"><img class="img-responsive" src="images/hier das dritte Bild" /></a>
    </div>
</div>

 

Hallo zusammen,
danke für die Anleitung, eine Frage habe ich noch:
Die 3 Bilder werden in der mobilen Ansicht nun untereinander dargestellt.
Kann man die komplette Reihe in klein nebeneinander darstellen?
Oder als Alternative diesen Content in der mobilen Ansicht ausblenden?
LG

 

Diese Zeile:
<div class="col-xs-12 col-sm-4">
gibt die Größen an
100% (die ganze Breite) sind 12 Gridspalten, 50% sind noch 6 Gridspalten....
col-xs steht für XS-Monitore also Handys
col-lg wäre für PCs
col-sm und col-md sind tablet landscape und tablet Portrait (die verwechsel ich gerne, deshalb sage ich jetzt nicht was was ist )
col-xs-12 ist also Auf dem Handy soll das Bild über den ganzen Bereich gehen
col-sm-4 sagt ab dieser Größe soll das Bild nur noch 1/3 des Bereiches ausfüllen

Wenn Du möchtest, dass immer 3 Bilder nebeneinander sind, musst du nur aus den col-xs-12 ein col-xs-4 machen.
Ob man auf einem kleinen Gerät dann aber noch viel erkennt.....

Bin mir nicht ganz sicher und kann gerade nciht testen, aber es könnte mit
<div class="row space-1 hidden-xs">
<div class="col-sm-4">
....
auf dem Handy ausgeblendet sein.