Mobirise-Tutorials.com

Moin.
Ich schon wieder.
Ich habe in meiner Seite einen Header eingebaut, der ein Bild (Fußball) an der rechten Seite hat.
Das ist in der PC Ansicht auch vollkommen in Ordnung.
Wenn ich mir die Seite dann auf dem Smartphone anschaue, ist der Ball nach unten an den linken Rand verschoben.
Soweit auch ok. Denn rechts passt er ja nicht mehr hin.
Ich möchte Ihn aber auf dem Phone gerne mittig haben. Und vielleicht auch so ein bisschen in der Textbox platziert.
Ist er in der PC Ansicht ja auch. Kann man doch bestimmt hinbekommen. Oder?

https://tsad17.de/BSV2022/

... ich kann das erst morgen angucken (bin heute beschäftigt) - da fehlt dann eine Bootstrap-Class zum Zentrieren.

... bitte erinnere mich - falls ich es vergessen sollte ...

Moin,

den Ball kannst Du mit der Bootstrap class="d-flex justify-content-center" zentrieren:

https://getbootstrap.com/docs/5.0/utili ... fy-content

Du schreibst also diese Class noch mit an die class="item-wrapper" mit dran, dann also so:

Diese Class im Bereich "HTML Code" vom "Code Editor" ändern von:

<div class="item-wrapper">

... in diese Class:

<div class="item-wrapper d-flex justify-content-center">

Die gesamt Section würde dann so aussehen:

Code: Alles auswählen

<section data-bs-version="5.1" class="image2 cid-sQgwcY7mGV" id="BallFooter">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-1">
                <div class="item-wrapper d-flex justify-content-center">
                    <img id="ball" src="assets/images/ball-156x157.png" class="w-100" alt="">                   
                </div>
            </div>
        </div>
    </div>
</section>

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

Moin.
Danke.
Da werde ich mal loslegen........

Mobirise-Tutorials.com

Bild in der Smartphone Ansicht an anderer Stelle

Bild in der Smartphone Ansicht an anderer Stelle

Re: Bild in der Smartphone Ansicht an anderer Stelle

Re: Bild in der Smartphone Ansicht an anderer Stelle

Re: Bild in der Smartphone Ansicht an anderer Stelle

Re: Bild in der Smartphone Ansicht an anderer Stelle