Hilfe bei responsive Design

  • 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

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 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.

    Bitte keine Fragen per PM, oder Foren-Chat. Für Fragen ist das öffentliche Forum da. Meine Uerdinger Seite

  • Zitat von 'Marcus[IS

    ;741863']Das zweite Problem kann ich leider nicht lokalisieren. Auf meinem Galaxy S3 sieht das Layout okay aus, da ist nichts verschoben.

    Ich kann es auch nicht nachvollziehen. Sieht alles gut aus auf dem Handy.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • 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:


    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?

  • 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.

    Bitte keine Fragen per PM, oder Foren-Chat. Für Fragen ist das öffentliche Forum da. Meine Uerdinger Seite

    Einmal editiert, zuletzt von Marcus[IS] (10. Dezember 2017 um 16:25)

  • 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 :-?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!