Zur Navigation

Bootstrap

1 Moni

Hi,
ist es mit Bootstrap möglich einem Bild in der Mobilen Ansicht oben oder unten zuzuweisen?

https://www.kingkratzbaum.de/katzen-spielesammlung1.html

Das 1. Bild sollte dann unter der Überschrift Mäuschenjagd stehen
das 2. Bild unter der Überschrift Tunnelabendteuer

Gruß Moni

10.10.2025 18:45

2 Jörg Kruse

Die Bilder sind mit float positioniert. Wenn du in der Media Query für die mobile Ansicht für die beiden Bilder "float: none" definierst, werden sie unterhalb des Elements angezeigt, unter welchem sie im HTML-Text angeordnet sind. Du kannst die Bilder im HTML ensprechend unter die beiden Überschriften positionieren. Dadurch verschieben sich allerdings auch die Positionen der Bilder in der Desktop-Ansicht leicht nach unten.

In einem CSS-Grid lassen sich auch Grid-Template-Areas definieren, die in Desktop- und Mobile View unterschiedlich befüllt werden könnten. Bootstrap scheint so etwas aber wohl nicht zu kennen, man findet jedenfalls nichts dazu in deren Dokumentation.

PS: die Benachrichtigung des Forums an deine E-Mail-Adresse kann nicht zugestellt werden: "Mailbox disabled"

11.10.2025 10:49 | geändert: 11.10.2025 10:51

1 Forenmitglied fand diesen Beitrag gut

3 Moni

Vielen Dank Jörg,
meine Mailadresse habe ich geändert.
Ich bin ja nicht so fit und gerade auch im Gambio Shop nicht so einfach. Grid schaue ich mir mal an, schade dass es mit den Boardmitteln nicht geht.
Schönes Wochenende

11.10.2025 13:13

4 Moni

Hallo Jörg,
jetzt habe ich mal neu gemacht und komme nicht weiter,
es geht alles (Firefox Mobil usw.) bis auf das letzte Bild bzw. die Passage und ich finde den Fehler nicht... (css werde ich dann auslagern)

https://www.kingkratzbaum.de/katzen-spielesammlung1.html

12.10.2025 16:31

5 Jörg Kruse

es geht alles (Firefox Mobil usw.) bis auf das letzte Bild bzw. die Passage

Du meinst das Bild unter "Fummelkiste"? was soll da wie anders dargestellt werden?

Die max-width Angabe der Media Query muss denke ich hier noch erhöht werden auf 1200px: 

@media (max-width: 1080px) {
  .box-kitten .item1 {
    order: 1;
    background-color: #e74c3c;
    text-align: left;
  }
}

... weil erst ab 1200px wird das Bilder mit Überschrift neben dem Text angezeigt, so dass die order Angabe auch bis dahin wirken sollte.

13.10.2025 09:59 | geändert: 13.10.2025 10:02

1 Forenmitglied fand diesen Beitrag gut

6 Moni

Hallo Jörg,
ich hatte es hinbekommen, es zeigte seltsamerweise 2-spaltig an nur bei der Letzten obwohl der gleiche code usw.
Es lag an den item breiten, ich hatte da 60% und 20% usw.
Was jetzt nicht ging war die max-width am Ipad Landscape, ich habe jetzt umgestellt auf 1280 so dass auch dort das Überschrift/Bild als 1. erscheint, so möchte ich es auf den Mobilen Geräten auch haben.
Ich denke das ist die beste Lösung oder hast Du noch eine andere Idee?
Gruß Moni

13.10.2025 11:11

7 Jörg Kruse

Die Umsetzung mit der Flexbox ist sicher eine gute, einfache Lösung. Die Umsetzung mit CSS-Grids wäre hier etwas aufwendiger - ich hatte ich dies auch nur vorgeschlagen wegen Bootstrap, welches ja auch eine Art von Grids erstellt.

13.10.2025 11:38 | geändert: 13.10.2025 11:40

8 Moni

Ich habe jetzt umgestellt auf 1270 dann passt es perfekt auch mit Ipad.
Eben, es sind recht viele Beiträge und es wird zeit diese vernünftig umzustellen.
Danke für Deine Hilfe.

13.10.2025 11:42

9 Moni

So langsam verliere ich echt die Lust, keine Ahnung warum das jetzt nicht geht...

Bei diesem Link:

https://www.kingkratzbaum.de/kratzbaum-grosse-schwere-katzen.html

Hier sollte in der Desktop ansicht

Bild 1 rechts
Bild 2 rechts - auch hier sind die Bilder links warum und auch die Abstände nicht stimmen keine Ahnung?

In der Mobilen Ansicht sollen die Bilder dann links sein...

Hier beide Bilder recht und passt: https://www.kingkratzbaum.de/kratzbaum-live-planen/.html

13.10.2025 21:40 | geändert: 13.10.2025 22:12

10 Moni

Oh mann, wenn man den Wald vor lauter Bäumen nicht sieht...
es hat bei den Bildern class="img-responsive" gefehlt...

13.10.2025 22:47

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]