Nachtrag:
... ach ja, ich habe jetzt gearde den Ball
unten auf Deiner Seite beschrieben, denn der sitzt ja auch ganz links am Handy und nicht mittig.
Der Ball oben sieht für mein "Designer Auge" ohnehin sehr deplatziert aus. Das ist vollkommen aus dem optischen Gleichgewicht und ich würde den Ball dort besser ganz weg machen:
Du könntest natürlich solche Dinge auch am Smartphone anders darstellen als am Desktop. Das kann man über
@media Anweisungen tun, die sich auf die Pixel-Breite des jeweiligen Geräte-Displays beziehen.
Das schreibe ich jetzt aber
auswendig und habe es
nicht ausprobiert
So steht es jetzt am Desktop.
Ich habe noch zur Anzeige, mit Verwendung der zusätzlichen CSS (unten), die
id="ball-desktop" hinzugefügt:
Code: Alles auswählen
<div id="ball-desktop" class="image-wrapper">
<img src="assets/images/fussball-150x150.png" alt="Ball">
</div>
Dann kannst Du mal versuchen direkt darunter eine zweites <div> mit der
id="ball-smartphone" für das Smartphone mit der Bootstrap-Class zum Zentrieren zu setzen (wie auch schon oben beschrieben).
Code: Alles auswählen
<div id="ball-smartphone" class="image-wrapper d-flex justify-content-center">
<img src="assets/images/fussball-150x150.png" alt="Ball">
</div>
Merke: eine
ID darf auf der gleichen Webseite immer nur 1 x vorkommen. Sie muss also immer "unique" (einzigartig) sein.
... diese CSS im Bereich "CSS Editor" vom Block mit dem Ball sollte dann am Desktop und am Handy am
Breakpoint
eine andere Anzeige bewirken, also das <div> mit seiner ID entweder anzeigen
display: block; oder eben nicht
display: none;:
Code: Alles auswählen
@media (min-width: 768px) {
#ball-desktop {
display: block;
}
#ball-smartphone {
display: none;
}
}
@media (max-width: 767px) {
#ball-desktop {
display: none;
}
#ball-smartphone {
display: block;
}
}
Gucke Dir auch mal die definierten Breakpoints von "Bootstrap 5" hier an:
https://getbootstrap.com/docs/5.0/layou ... reakpoints
