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

Hilfe bei responsive Design

Dieses Thema im Forum "Design" wurde erstellt von cmfrank, 9. Dezember 2017.

Schlagworte:
  1. cmfrank

    cmfrank Member

    Registriert seit:
    3. November 2013
    Beiträge:
    16
    Zustimmungen:
    0
    Hallo zusammen,

    ich benötige etwas Hilfe bei einer Wordpresssite. Ich habe dort ein Theme installiert und die Seite vollständig eingerichtet. Einzig bei der mobilen (responsive) Darstellung sind mir zwei Probleme aufgefallen, wo ich nicht weiß wie dies zu ändern ist. Im Anhang befindet sich noch ein Screenshot. Es geht um folgende zwei Punkte:

    1. Auf dem Handy wird das Logo im sticky Header extrem klein. Das lässt sich leider nicht extra Einstellen sondern wird "automatisch" skaliert, deshalb die Frage wie das evtl. über die Style-CSS oder ähnlich sich ändern lässt?
    2. Das Bild unter dem Punkt "Leistungen" überschneidet sich mit der ersten Textzeile (aber nur auf dem Handy egal ob iOS oder Android) in derselben Größe auf dem PC skaliert das Bild richtig. Woran liegt das?

    Hier noch der Link zur Seite:
    http://wb-projektentwicklung.de.www357.your-server.de/

    Vielen Dank für eure Hilfe und Ideen im voraus
    cmfrank
     

    Anhänge:

    #1 cmfrank, 9. Dezember 2017
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    das mit dem Logo kannst du mittels Media Queries in der style.css anpassen.
    Musst halt nur das entsprechende Query in der css definieren.

    Hier ein wenig Lesetoff zum einarbeiten. ;)
    https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    Das zweite Problem kann ich leider nicht lokalisieren. Auf meinem Galaxy S3 sieht das Layout okay aus, da ist nichts verschoben.
     
    #2 Marcus[IS], 9. Dezember 2017
  3. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ich kann es auch nicht nachvollziehen. Sieht alles gut aus auf dem Handy.
     
    #3 SirEctor, 9. Dezember 2017
  4. cmfrank

    cmfrank Member

    Registriert seit:
    3. November 2013
    Beiträge:
    16
    Zustimmungen:
    0
    Okey danke für die Info. Ich habe es jetzt auch auf verschiedenen Android Handys ausprobiert da sieht es soweit ordentlich aus. Jetzt nur die Frage woran es liegt ... an iOS oder ehr am Design? :confused:
    Zum Thema Media Queries habe ich mich jetzt etwas eingelesen und auch die Deklaration in der style.css gefunden, leider ändert sich jedoch nichts wenn ich die Werte anpasse. Hier ein Auszug:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn ich es richtig Verstanden habe müsste ich die Größe ja über den Wert "max-width" unter ".mobile-logo img" anpassen können oder übersehe ich hier etwas?
     
    #4 cmfrank, 10. Dezember 2017
  5. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    War denn die Deklaration in der css Datei vorhanden?

    Zum Beispiel @media screen and (max-width: 699px) and (min-width: 520px) usw....

    Falls ja, würde ich mal auf alte Cache Daten tippen, die nach der Änderung noch aufgerufen werden.
    Also Cache des Browser, oder von einem eingesetzten Cache Plugin verursacht.

    Ich habe es gerade mal mit meinem Entwickler Tool in Google Chrome ausprobiert.

    Das Logo wird mit der fixen Breite (width) 80px ausgeliefert.
    Ändert man diesen Wert in 100% erstreckt sich das Logo über die komplette Seitenbreite, was denke ich auch von dir so geplant ist.

    Man kann ja verschiedene Endgeräte im Entwicklertool simulieren, allerdings weiß ich nicht wie zuverlässig die Daten dieser Funktion sind.

    Ich habe verschiedene Einstellungen mit 100% versucht und bei diesen Auflösungen klappte es hervorragend.

    Hochformat;

    (Galaxy S5) 360 x 640
    (Nexus 5X, 6P) 412 x 732
    (iPhone 7, 8) 375 x 667
    (iPhone 7+, 8+) 414 x 736
    (iPhone X) 375 x 812

    Im Querformat sah es auch okay aus, musst halt nur die oben angegebenen Werte umdrehen, also zum Beispiel für S5 = 640 x 360.


    Ich hoffe die Daten helfen dir weiter.
     
    #5 Marcus[IS], 10. Dezember 2017
    Zuletzt bearbeitet: 10. Dezember 2017
  6. cmfrank

    cmfrank Member

    Registriert seit:
    3. November 2013
    Beiträge:
    16
    Zustimmungen:
    0
    Ja diese Deklaration war schon vorhanden, habe jetzt mit den Entwicklertools (allerdings Firefox) auch gesehen, dass es mit der festen Bereite von 80px ausgeliefert wird nur finde ich noch nicht wo die 80px festgelegt sind :roll: da muss ich wohl noch etwas suchen. Cache lösche ich zwischendurch immer wieder.

    Danke für die Daten, hilft mir weiter :) Dann muss ich jetzt nur noch rausfinden warum es auf iOS geräten nicht richtig angezeigt wird :-?
     
    #6 cmfrank, 10. Dezember 2017
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  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.
    Akzeptieren Weitere Informationen...
    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.
    Akzeptieren Weitere Informationen...
    Information ausblenden