08.08.2023, 10:51
|
|||
|
|||
Im iPhone nicht zentriert
Hallo Leute,
In meinem Layout habe ich für jedes Angebot einen Container mit einem Hintergrundbild und der Text im Container sollte sowohl horizontal als auch vertikal zentriert sein. Also eben genau in der Mitte des Containers. Das funktioniert am Computer auch in allen Browsern, aber auf dem iPhone leider nicht. Siehe hier: Beauty & Studio Und so schon das ganze im iPhone aus   http://sabine.bplaced.net/3010/1.jpg http://sabine.bplaced.net/3010/2.jpg Hier der CSS-Abschnitt Code:
.boxen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
grid-auto-rows: 1fr;
}
.boxen div {
display: grid;
background: url(images/kreis.png) no-repeat center center;
background-size:cover;
height: auto;
aspect-ratio: 1 / 1;
margin: 1rem 0;
justify-items: center;
align-items: center;
}
.boxen a {
color: var(--body-color);
font-size: var(--fs0);
text-transform: uppercase;
text-align: center;
font-weight: bold;
padding: 1rem;
}
@container realcontent (min-width: 32rem) {
.boxen div {
margin: 1rem;
}
}
|
| Sponsored Links |
|
08.08.2023, 11:20
|
|||
|
|||
|
Wahrscheinlich liegt das Problem beim
Code:
aspect-ratio: 1 / 1;
|
| Sponsored Links |
|
08.08.2023, 12:24
|
|||
|
|||
|
Sieht für mich danach aus, als ob beim iPhone das a nicht auf das align-items: center; reagieren will. (Habe leider kein iPhone zum Testen.)
Vielleicht liegt es daran, dass ein a erst mal default ein Inline-Element ist. Versuch doch mal bei .boxen a noch ein display: grid; (oder block) zu ergänzen.
|
|
08.08.2023, 16:55
|
|||
|
|||
|
Vielen Dank ihr beiden für eure Antworten!
Zitat:
Zitat:
Beauty & Studio Beauty & Studio Auf meinem Computer funktioniert es, aber ob es auf dem iPhone passt, weiß ich nicht, denn ich habe kein iPhone
|
|
08.08.2023, 17:44
|
|||
|
|||
|
Zitat:
|
|
09.08.2023, 12:39
|
|||
|
|||
|
Eine andere bewährte Methode ist "padding-top" dafür zu missbrauchen:
https://stackoverflow.com/questions/...safari-browser Die Frage wäre aber auch welches iOS auf dem iPhone genutzt wird. Ab iOS15/Safari15 sollte "aspect-ratio" auch ohne Hack funktionuckeln: https://caniuse.com/mdn-css_properties_aspect-ratio Frag deinen iPhone-Nutzer daher mal ob sein iOS aktuell ist.  Edit: Ich sehe gerade - vielleicht liegt es auch an den Leerzeichen? Code:
aspect-ratio: 1 / 1; aspect-ratio: 1/1; Geändert von top (09.08.2023 um 12:43 Uhr)
|
|
09.08.2023, 14:26
|
|||
|
|||
|
Zitat:
Werde aber meinen Bekannten noch einmal bitten, dass ich sich das ganze anschaut. Zitat:
Hatte gedacht, die Leerzeichen braucht man https://css-tricks.com/almanac/prope.../aspect-ratio/
|
|
12.08.2023, 16:23
|
|||
|
|||
|
Zitat:
Hast du dich mal getraut deinen Bekannten zu fragen welches iOS er nutzt??
|
|
22.08.2023, 10:11
|
|||
|
|||
|
Obwohl mein Bekannter auf seinem iPhone das neueste iOS wird der Link in beiden Beispiel nicht horizontal und vertikal zentriert angezeigt.
Beauty & Studio https://sabine.bplaced.net/3010/200.jpg Beauty & Studio https://sabine.bplaced.net/3010/300.jpg
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Responsive Design bei iPhone 6 nicht möglich | Overtone | CSS | 2 | 16.01.2015 09:05 |
| CSS tabelle wird im FF nicht zentriert dargestellt | neugierig_asdf | CSS | 2 | 08.02.2009 14:23 |
| Testcase Netscape: Box immer zentriert, daher unlesbar | Leeloo | CSS | 0 | 08.09.2007 19:28 |
| <hr> im ie 7 mal zentriert, mal nicht??? | KungFuZius | CSS | 1 | 08.01.2007 18:27 |
| text zentriert über bild problem | clory | CSS | 7 | 07.03.2005 11:37 |
Linear-Darstellung
