1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

CSS-Problem bei Darstellung auf IPhone

Dieses Thema im Forum "Design" wurde erstellt von forcemedia, 29. August 2017.

  1. forcemedia

    forcemedia Active Member

    Registriert seit:
    16. Februar 2017
    Beiträge:
    34
    Zustimmungen:
    0
    Hallo Zusammen,

    benötige mal etwas Hilfe, da ich gerade auf dem Schlauch stehe.

    Es dreht sich um den Inhalt folgender Seite (genauer gesagt um die Speisekarte):
    https://tinyurl.com/yc55qnhn

    Wenn man sich die Speisekarte auf einem Android-Gerät betrachtet, wird diese wie gewünscht dargestellt. Das bedeutet von der Reihenfolge her:
    - Speisename und Preis
    - Erklärung / Beschreibung des Gerichts

    Bei der Ansicht auf dem iPhone sieht das Ganze leider etwas anders aus:
    - Speisename
    - "." + Preis
    - Erklärung / Beschreibung des Gerichts

    (siehe dazu auch Grafiken anbei).

    Ansicht_iPhone.jpeg Ansicht_Samsung.jpeg

    Danke für Eure Unterstützung.
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Versuch mal @media all and (max-width:480px) anstatt nur @media (max-width:480px)
     
  3. forcemedia

    forcemedia Active Member

    Registriert seit:
    16. Februar 2017
    Beiträge:
    34
    Zustimmungen:
    0
    Danke für den Hinweis. Ist saubererer CSS, führte aber leider nicht zur Lösung.
     
  4. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Welches iPhone soll damit funktionieren? iPhone ist nicht gleich iPhone.
     
  5. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Schau mal in der custom.css ob da zufällig irgendwo eine { oder } fehlt oder zu viel ist.
     
  6. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Das Problem könnte der fixe Wert für margin-right sein (Zeile 49 des Custom CSS):

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ansonsten ist das Angebot lecker! :p
     
    #6 Edi, 29. August 2017
    Zuletzt bearbeitet: 29. August 2017
  7. forcemedia

    forcemedia Active Member

    Registriert seit:
    16. Februar 2017
    Beiträge:
    34
    Zustimmungen:
    0
    Also Edi reproduzierbar ist die fehlerhafte Darstellung auf iPhone 4s, 6, 6s und 7. Zumindestens sind das die Geräte auf denen wir reproduzieren konnten bzw. erfragt haben. Weitere nicht augeschlossen. Nach der geschweiften Klammer habe ich gesucht, aber da scheint mir alles in Ordnung zu sein. Der fixe Wert für margin-right sorgt dafür dass der Preis mit entsprechendem Abstand vom rechten Rand angezeigt wird. Habe es zwar gerade eben mal temporär entfernt, es gab aber keine Änderung außer dass der Preis selbst mehr in die Mitte gerückt ist.
     
  8. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Im Browser kann ich den Fehler so reproduzieren. Er kann aber auch eine andere Ursache haben. Nur: 70 Pixel sind bei einer Screen-Breite von beispielsweise 320 Pixel eine ganze Menge... Kommt dazu, wie die "Tabelle" konstruiert ist.

    Da es sich beim Theme um ein Kauf-Theme handelt: Warum fragt Ihr nicht dort nach? Mit dem Kauf wird normalerweise auch für den Support bezahlt. Und irgendwelche Fehler für etwas, mit dem andere Geld verdienen, kostenlos nachzubessern, macht mässig Spass. ;)
     
  9. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Die 70px sind nicht das Problem. Man kann es sehr gut auch am PC reproduzieren, allerdings nur mit dem Safari. Dort werden alle CSS-Angaben gezogen, aber die media-queries nicht bzw. nur der Inhalt ohne das @media. Scheint also ein Safari-Problem zu sein. Nur mit Ferndiagnose ist es daher schwer den Fehler zu finden. Daher mach es wie @Edi sagt, frag beim Theme-Autor nach.
     
  10. forcemedia

    forcemedia Active Member

    Registriert seit:
    16. Februar 2017
    Beiträge:
    34
    Zustimmungen:
    0
    Danke Euch für den Tipp. Werde den Weg über den Theme-Hersteller mal gehen.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden