Bild in der Smartphone Ansicht an anderer Stelle
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Bild in der Smartphone Ansicht an anderer Stelle
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 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/
scherenschlag
MBR 5.9.17
MBR 5.9.17
- Tommy Herrmann
- Site Admin
- Beiträge: 5889
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild in der Smartphone Ansicht an anderer Stelle
... 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 ...
... bitte erinnere mich - falls ich es vergessen sollte ...
- Tommy Herrmann
- Site Admin
- Beiträge: 5889
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild in der Smartphone Ansicht an anderer Stelle
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:
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>
- Tommy Herrmann
- Site Admin
- Beiträge: 5889
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild in der Smartphone Ansicht an anderer Stelle
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:
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).
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
Gucke Dir auch mal die definierten Breakpoints von "Bootstrap 5" hier an:
https://getbootstrap.com/docs/5.0/layou ... reakpoints
... 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>
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>
... diese CSS im Bereich "CSS Editor" vom Block mit dem Ball sollte dann am Desktop und am Handy am
Breakpointeine 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;
}
}
https://getbootstrap.com/docs/5.0/layou ... reakpoints
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Re: Bild in der Smartphone Ansicht an anderer Stelle
Moin.
Danke.
Da werde ich mal loslegen........
Danke.
Da werde ich mal loslegen........
scherenschlag
MBR 5.9.17
MBR 5.9.17
Wer ist online?
Mitglieder in diesem Forum: Bing [Bot] und 22 Gäste