Theme "twentythirteen" sieht auf Tablets und Handy-Browsern komplett falsch aus

    Hallo zusammen.
    Nachdem ich nun für einen Verein eine Webseite auf Basis von Wordpress und oben genanntem Theme erstellt und so gut wie zum Abschluss gebracht habe, wollte ich mal schauen wie sich die Seite auf Handys und Tablets verhält... und ich werde grade extremst panisch.

    Hier mal der Link.

    Ich hoffe das ist nur irgendeine Einstellung die ich irgendwo im Editor ab- oder einschalten muss um die Seite 1zu1 anzeigen zu lassen. Wenn nicht, habe ich schick eine Woche umsonst gearbeitet.

    Ich hoffe Ihr habt eine Lösung. Bei Google habe ich leider nichts spezifisches dazu gefunden.

    Wie gesagt. Auf PC und MAC Browsern alles kein Thema. iPad und Android Firefox Version sehr unschön.

    Danke schonmal für Eure Hilfe.

    *sich selbst die Daumen drück*

    BassMan

    • Gerade eben
    • 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

    Was meinst Du, das responsive? Also, dass sich Elemente bei unterschiedlichen Größen verschieben? Das ist bei dem Theme so gewollt und eigentlich für mobile Geräte sinnvoll.

    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]

    Im Grunde ja, aber bei der jetzigen Einstellung ist die ganze Seite so verschoben, dass das wenig nach "gewollt" aussieht. Und das wird der Verein genauso sehen.

    Die Navi ist zerstückelt der Header abgeschnitten in der Breite, die Widgets sitzen unter den Texten, der Footer ist 2zeilig... etc pp.

    Ich habe derweil ein bisschen im CSS rumgespielt und mich im style.css um die 8.Mobile Devices gekümmert. Da kann man ja einiges einstellen, aber selbst wenn man dort alles rausnimmt, zeigt sich die Seite nicht 1zu1. Und dieses 1zu1 will ich aber erreichen. Responsive hin oder her :???:

    Aber zumindest habe ich nun die Hoffnung, dass ich das im CSS irgendwie beheben kann... Meine Panik legt sich ein wenig, aber da scheint noch viel Arbeit vor mir zu liegen, denn wie gesagt, wenn die komplette Nr. 8 im CSS entferne bestehen fast alle "Probleme" immer noch. Vor allem der Header ist abgeschnitten, mit weniger Textbreite im Content-Bereich kann ich ja irgendwie leben.

    Also wer hier auch schonmal im CSS vor diesem "Problem" stand, ich wäre Euch echt dankbar, wenn ich nicht fast jede CSS Anweisung auf eine Reaktion in diversen mobilen Browsern testen muss.

    Habe mir nun das Plugin "Responsible" installiert und kann mir nun oben in der Admin-Leiste die Webseite auf diversen mobilen Endgeräten emulieren lassen. Was ich aber nicht verstehe: Wo steht im CSS die Erlaubnis das Headerbild seitlich abzuschneiden und nicht mal mehr durch "pinch & squeeze" auf Vollbild zu stellen?

    Nimm die ganzen media-queries raus, wie Du schon geschrieben hast (Nr. 8 und setz dann im body z. B. eine min-width von 1024px

    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]

    Einmal editiert, zuletzt von SirEctor (24. Juni 2014 um 19:02)

    Zitat von BassMan

    Was ich aber nicht verstehe: Wo steht im CSS die Erlaubnis das Headerbild seitlich abzuschneiden und nicht mal mehr durch "pinch & squeeze" auf Vollbild zu stellen?

    Code
    .site-header {
background: url(http://www.kg-naerrischer-laurentius.de/wp-kgnl2014/wp-content/uploads/2014/06/cropped-Header.png) no-repeat scroll top;
[COLOR=#ff0000]background-size: 1600px auto;[/COLOR]
}


    Die rot markierte Stelle erlaubt das in der CSS.

    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]

    SUPER !!!!
    Das war es!!!! Die min-width Angabe, das Ändern der 1600px auf 100%, sowie das Löschen der Media-Queries, hat nun zu meinem gewünschten Ergebnis geführt. Habe zur Sicherheit die Navibreite auch noch von 1600px auf 100% geändert.

    Geil, geil, geil!
    Danke für die ultraschnelle Hilfe.
    War meine erste Wordpress-Seite ever. Dafür bin ich ganz zufrieden. An den Feinheiten haperts aber scheinbar noch.

    Responsive ist zur Zeit ganz modern und viele wollen genau das, was Du jetzt abgestellt hast. Für mobile Geräte ist eine responsive Variante eigentlich viel besser. Aber schön, dass wir trotzdem helfen konnten.

    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]

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden