Webseite sieht auf verschiedenen PC anders aus

    Hallo liebe Community!

    Letztes Jahr habe ich für einen Freund eine Wordpress Webseite erstellt für seinen Mobilen Pflegedienst. Das hat wunderbar geklappt. Ich habe mir anhand verschiedener Tutorials (YT / Udemy) mein knowhow selber beigebracht.

    Jetzt habe ich mir eine eigene Domain / eigenes Webhosting zugelegt um zu üben, da mir Webdesign mit Wordpress / Elementor riesigen Spaß macht.

    Aber da geht gerade irgendwie alles schief... die Webseite sieht auf jeden PC unterschiedlich aus, also die Widgets sind verschoben, haben eine andere Größe oder tauchen erst gar nicht auf...

    Mir fehlt das Wissen um zu verstehen, was ich falsch gemacht habe / wo das Problem liegt.

    Ich wäre für eure Hilfe sehr dankbar!

    Webseite: http://www.flixiflux.de (Bitte nicht den Inhalt bewerten, es ist wie gesagt eine Webseite zum üben :) )

    Vielleicht einige Daten die für euch wichtig sind:

    Theme: OceanWP Version 3.5.7
    WP Version 6.5.5
    Builder: Elementor 3.22.2

    Vielen Dank vorab!

    • 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

    Zitat von Flixiflux

    die Webseite sieht auf jeden PC unterschiedlich aus


    Bei mir sieht die Seite soweit korrekt aus. Was heißt denn "unterschiedlich"? Ohne genauere Problembeschreibung wird man dir kaum helfen können.

    Dank uha, das habe ich total vergessen, mit Bildern sollte mein Problem besser zu erkennen sein.

    Noch eine Info vorweg: Die Webseite für meinen Kumpel habe ich auf einem Laptop gemacht. Meine "Übungsseite" habe ich teils auf dem Laptop, teils am PC gemacht, aber das sollte eigentlich nicht zu solchen Problemen führen oder?

    Hier die Bilder, also so sieht die Seite auf meinem PC aus und so ist alles korrekt:

    https://ibb.co/Sm5QjjK
    https://ibb.co/wBHw3dR
    https://ibb.co/sy0YWRk
    [Blockierte Grafik: https://ibb.co/Sm5QjjK]
    [Blockierte Grafik: https://ibb.co/wBHw3dR]
    [Blockierte Grafik: https://ibb.co/sy0YWRk]

    Und so sieht die Seite zum Beispiel aus, wenn ich sie mit meinem Laptop besuche:

    https://ibb.co/QXy8c5Z
    https://ibb.co/tb5FWRS
    https://ibb.co/hsbb36q
    [Blockierte Grafik: https://ibb.co/QXy8c5Z]
    [Blockierte Grafik: https://ibb.co/tb5FWRS]
    [Blockierte Grafik: https://ibb.co/hsbb36q]

    Heute habe ich die Webseite am PC von der Arbeit aus besucht, nur um zu gucken wie sie von dort aussieht und auch da waren die Widgets verschoben usw., da habe ich jetzt nur keine Screenshots von, könnte ich aber nachliefern.

    Ich würde mich über jede Hilfe wirklich sehr freuen!

    im webdesign sind idr die objekte relativ zueinander angeordnet und positionieren sich je nach bildschirmgröße und -format neu. das ist das grundkonzept vom rwd "responisve webdesign". wenn bestimmte objekte sich nicht zueinander verschieben sollen, müssen sie in divs/containers zusammengeführt und ihr verhältnis zueinander definiert werden.

    aber das alles über einen forumsbeitrag zu erklären, sprengt mmn die möglichkeitenen eines forums. am besten du steigst noch einmal intensiver in deine yt/udemy videos ein? ;)

    nein, ich gebe keinen support per pm. wenn du ein problem hast, stelle eine öffentliche frage ins forum.

    Zitat von DummyGirl

    im webdesign sind idr die objekte relativ zueinander angeordnet und positionieren sich je nach bildschirmgröße und -format neu. das ist das grundkonzept vom rwd "responisve webdesign".

    Tatsächlich habe ich an der Arbeit nochmal geschaut und das Problem hat sich tatsächlich gelöst nachdem ich mit Strg + Mausrad die Ansicht verkleinert habe :D

    Ich war nur so verwundert, als ich für meinen Freund letztes Jahr die Webseite gemacht habe (RWD PC / Tablet / Smartphone) war die Seite immer gleich aufgebaut, egal an welchem PC usw. ich mir die Webseite angeschaut habe.

    Zitat von DummyGirl

    wenn bestimmte objekte sich nicht zueinander verschieben sollen, müssen sie in divs/containers zusammengeführt und ihr verhältnis zueinander definiert werden.

    Was meinst du mit Divs? Also ich habe wirklich sehr sehr viele Tutorials geschaut und bin eigentlich der Meinung, ich weiß wofür Container da sind, Sections usw. usw.

    Aber man lernt ja nie aus :) kennst du speziell zu diesem Thema ein Tutorial oder Ähnliches, was ich mir dazu angucken kann?

    Auf jeden Fall Danke für eure bisherige Hilfe!

    Eine Sache fällt mir gerade noch ein zum Thema RWD. Man kann ja zB für das RWD "laptop" noch hinzufügen. Ist das notwendig? Damals bei der Webseite von meinem Freund hatte ich das nicht gemacht und die Seite wurde trotzdem auf dem Laptop wie erstellt angezeigt

    Zitat von Flixiflux

    das Problem hat sich tatsächlich gelöst nachdem ich mit Strg + Mausrad die Ansicht verkleinert habe


    naja, das ist ja keine lösung.
    auf einem 16" macbook sieht das ganze so aus und ich denke, dass ist nicht, wie du es geplant hast:

    auf dem smartphone sieht die seite völlig unbrauchbar aus.

    nein, ich gebe keinen support per pm. wenn du ein problem hast, stelle eine öffentliche frage ins forum.

    Also meine Meinung, räume alles ab!
    die Kriese beginnt mit dem riesigen Hintergrundbild, auf das du mit diversen margins Texte verschiebst die dann bei der "richtigen" Browserfenstergröße schon mal ein temporär richtiges Ganzes anzeigt. Wenn du nun aber das Browserfenster veränderst zerfällt die ganze Konsrtuktion.

    Dazu 2 Bilder:
    Im ersten das gelbe Overlay zeigt das blau unterlegte Elementor Element mit margin-top: -902px; - Katastrophe!!!


    Das zweite Bild bei verkleiinertem Browserfenster - unmöglich!!!

    .... und alles mit Browser (hier Firefox) mit der Taste F12 erkennbar.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Zitat von DummyGirl

    naja, das ist ja keine lösung.
    auf einem 16" macbook sieht das ganze so aus und ich denke, dass ist nicht, wie du es geplant hast:

    RWD (Tablet / Smartphone) habe ich noch nicht bearbeitet, ich war bisher nur bei der PC Version. Jetzt mal ganz doof gefragt, kann es sein das die Laptop Version erst "gescheit" aussieht, wenn beim RWD die Tablet Version bearbeitet wurde?

    Zitat von DummyGirl

    auf dem smartphone sieht die seite völlig unbrauchbar aus.

    Wie gesagt, da war ich beim RWD noch nicht. Ich habe mit der PC Version angefangen und dann ist mir eben, wie oben beschrieben, aufgefallen, dass die PC Version auf verschiedenen Computern unterschiedlich dargestellt wird, das war oder ist ja mein Urspungsproblem.

    Zitat von SEpp55

    Also meine Meinung, räume alles ab!
    die Kriese beginnt mit dem riesigen Hintergrundbild, auf das du mit diversen margins Texte verschiebst die dann bei der "richtigen" Browserfenstergröße schon mal ein temporär richtiges Ganzes anzeigt. Wenn du nun aber das Browserfenster veränderst zerfällt die ganze Konsrtuktion.

    Tatsächlich fange ich nochmal von ganz vorne an, ist glaube ich am Besten :D

    Zu deiner Antwort hätte ich dennoch eine Frage: Wie bereits beschrieben, habe ich letztes Jahr diese Webseite für den Freund erstellt, da habe ich die Texte auch mit Margin/Padding an die richtige Stelle verschoben. Aber da hat alles funktioniert... und da habe ich von sehr vielen Stellen die Rückmeldung das die Seite sehr gelungen ist :cool:

    Aber wenn die Margin/Padding Werte das Problem sind, dass bei verschiedenen Browserfenstergrößen das Ganze "zerfällt", dann muss ich mich doch nochmla ganz dringend mit dem Thema beschäftigen und das werde ich auch tun, weil ich da voll bock drauf hab :cool:

    Danke für eure Rückmeldungen!

    Zitat von Flixiflux

    habe ich letztes Jahr diese Webseite für den Freund erstellt


    können wir nichts zu sagen, weil wir diese website nicht kennen. aber: wie schon von @SEpp55 und mir aufgeführt, versucht du, objekte über andere objekte oder hintergrundbilder "passgenau" zu schieben. da diese werte aber abhängig von der grösse des browserfensters sind funktioniert das nicht.

    nein, ich gebe keinen support per pm. wenn du ein problem hast, stelle eine öffentliche frage ins forum.

    Ahhh jetzt hat's Klick gemacht, viiielen lieben Dank, hab jetzt verstanden was ich falsch gemacht habe.

    Das gute ist, aus Fehlern lernt man :-D

    Ich mache dann mal alles von vorne :-D

    Zitat von Flixiflux

    Zu deiner Antwort hätte ich dennoch eine Frage: Wie bereits beschrieben, habe ich letztes Jahr diese Webseite für den Freund erstellt, da habe ich die Texte auch mit Margin/Padding an die richtige Stelle verschoben. ........

    Grundsätzlich verwende ich auch die Margin und Padding als gestalterische Option, wenn das gewählt Theme in manchen Bereichen nicht meinen Vorstellungen entspricht, aber eher sparsam!
    Du hast aber bei dem deinem Beispiel sehr viel übereinander gelegt und dann mir margin-top versucht dort hin zu schieben wo es passt.
    Fehler ist einmal das fehlende Grundkonzept.
    1. Klasse Homepagebau: Für die Gestaltung hat sich durchgesetzt von oben nach unten - Header, Content und Footer Hier werden dann wieder Container zur Unterteilung eingesetzt. Z.B Im Header für Logo, Menü, SocialMedia, Suchfeld oder was auch immer man meint dort haben zu wollen. Das Theme gibt meist sehr brauchbare Vorschläge vor.
    Gleich dazu passend, dein verwendetes Theme OceanWP ist ein sehr mächtiges Theme und die meisten Amateur User können bei weitem die Möglichkeiten dieses Themes nicht ausschöpfen und sind von den vielen Einstell- und Gestaltungsmöglichkeiten meist sehr schnell überfordert und wissen nicht, wenn durch wildes klicken etwas aus dem Ruder läuft, wie sie das wieder zurückstellen.
    Dazu der nächste Tip - immer wieder backups fahren um gute Zwischenstände wieder eispielen zu können. Btw nicht nur ein Backup haben ist gut, sondern man sollte auch üben, eine Wiederherstellung machen zu können, denn ein Backup ist sinnlos wenn man im Bedarfsfall damit nichts anfangen kann.
    Nochmals konkret zu deiner oben verlinkten Seite. Bei 2100px Browserbreite passt es, würde ich sagen, doch bei weniger Breite wird es immer schlimmer. Das schon angesprochene riesige Hintergrundbild aht erstend zu viele Inhalte. Den Rahmen für das Logo, das Feld für die Beschreibung gehören dort nicht hinein! Weiters wird das Bild dynamisch der Browserbreite angepasst (verkleinert), heißt schälerer Browser - kleineres Bild aber noch immer -902px oberer Rand und das setzt sich bei den Zahnrädern mit den Inhalten dort fort.

    Das ist meine bescheidene Meinung und bin mir sicher, das meine Meinung weder für andere richtig sein muß und schon gar nicht vollständig sein kann. Also viel Glück bei deinen Versuchen. Noch eine alte Weisheit - eine Homepage ist NIE fertig, man findet immer etwas zum ändern, ob es dadurch besser wird ist Ansichtssache :rolleyes:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Vielen Dank für deine ausführliche Antwort!

    Ich habe den Fehler verstanden (und denke gerade, ohje, da hätteste auch selber drauf kommen :-D ) und ich werde eure Tipps, die ihr alle mir hier gegeben habt, annehmen.

    Ich kann nur sagen: Tolles Forum, Tolle Member, danke dafür!

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden