Scheinbar Probleme mit media queries

    Guten Tag zusammen,


    ich stehe gerade vor einem ziemlich strangen Problem.


    Ich habe die Webseite für unser Unternehmen neu erstellt. Alles sitzt eigentlich da wo es hin gehört. Jetzt bin ich aber auf ein Problem beim responsiv Design gestoßen.


    Öffne ich die Seite über mein Handy wird diese direkt mit einem Zoom von, ich denke mal 2.0, dargestellt. Erst wenn ich doppelt auf den Bildschirm tippe passt sich die Seite an.


    Den Viewport habe ich auf 1.0 stehen und auch beim CSS sehe ich auf den ersten Blick keine Probleme.


    Das ist der momentane Link zur Seite


    http://www.wohnmobil-verkaufen.de/womoneu/


    Ich hoffe hier Hilfe zu finden.


    Beste Grüße
    Frank

    Nicht nur scheinbar Probleme. Selbst auf dem PC sieht es z.B. so aus (Bild 1)

    Auf dem Tablet sieht es auch nicht besser aus:

    Deine Domain funktioniert nur mit dem Zusatz nach .de. Ohne gibt es eine Fehlermeldung des Providers.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Oh je... da sind auf dem ersten Blick mehrere Dinge, die du mal prüfen solltest!
    zB... im Header fängst du an mit FlexBox....
    .header {
    display: flex;
    ....
    }
    Aber die internen div's, die doch dann gemäß dem display: flex; angeordnet werden sollen(?), positionierst du mit 'position: absolute;'
    Absicht?

    if(!sleep)

    {$sheep++;}

    Hallo

    Zitat

    Ich hoffe hier Hilfe zu finden.

    Schwierig. Das Problem ist deine grundsätzliche Vorgehensweise.

    Du verwendest Bootstrap. Anstatt aber Bootstrap und damit seine Vorteile auszunutzen verwendest du übermäßig viel eigenes CSS, dessen Verwendung Bootstrap Probleme bereitet.

    Zudem hat sich die Verwendung von min-device-width und max-device-width als problematisch erwiesen, da es überhaupt nichts über die aktuelle Fensterbreite aussagt.

    Sinnvoll sind aktuell eigentlich nur min-width und max-width. Da scheint die aktuelle Entwicklung etwas an dir vorbeigelaufen zu sein. Darauf deuten auch die vielfache Verwendung des hr-Elements und die position: absolute-Angaben hin.

    Insgesamt sollten die eigenen CSS-Angaben zunächst komplett gelöscht werden. Dann sollte die Seite zunächst soweit möglich mit Bootstrap neu gestaltet werden und eigenes CSS nur verwendet werden, wenn es keine Bootstraplösung gibt.

    Gruss

    MrMurphy

    Zitat von Gastl

    Nicht nur scheinbar Probleme. Selbst auf dem PC sieht es z.B. so aus (Bild 1)


    Kann ich irgendwie nicht nachvollziehen. Sowohl an meinem Arbeitsrechner als auch auf Laptop wird die Seite sauber dargestellt. Aber vielleicht ist irgendwo noch ein kleiner Bug drin.


    Zitat von Gastl

    Deine Domain funktioniert nur mit dem Zusatz nach .de. Ohne gibt es eine Fehlermeldung des Providers.


    Das ist auch erstmal so gewollt, da die alte Seite noch aktiv ist. Diese läuft über wohnmobilpark.com



    Danke für die Info. Das hatte ich total übersehen und sofort korrigiert.



    Das ist die wohl konstruktivste Kritik. Danke dafür. Da ich einen sehr ungeduldigen Chef habe wird dass wohl erstmal nichts mit CSS löschen und neu aufbauen. Es soll immer alles ganz schnell gehen. Am Besten mit einem Klick. ;)


    Ich habe jedoch noch keine wirklich Hilfe für dieses Hauptproblem bezüglich des Zoom bekommen. Daran dass ich Bootstrap eigengesetzt habe kann es nicht liegen. Ich habe die Zeile entfernt, Browsercache sicherheitshalber geleert und die Seite mobil nochmal aufgerufen. Jedoch keine Änderung.


    Für weitere Lösungsansätze bin ich weiterhin sehr dankbar.

    Gruß
    Frank

    Es ist schwierig nachzuvollziehen, was sich genau hinter deiner Fehlerbeschreibung verbirgt, deswegen hier noch mal der Hinweis auf einen 'Einzelfehler' der mir aufgefallen ist.
    Ob das allerdings dann letztlich alle deine Probleme löst, kann ich so nicht sagen... erst den beseitigen und dann nochmal nachschauen.
    ... das eingebettete YouTube Video!
    Da solltest du mal prüfen, ob das mit den im CSS vorgegebenen Dimensionen alles so seine Richtigkeit hat.
    Du hast da einen <div class="iframe"> mit width: 50%; - aber der Iframe in diesem div hat eine feste Breite von 600px? Das passt irgendwie nicht - das Video wird immer aus div herausragen! Und bei kleineren Displays die Breite 'aufblasen' !
    Schau doch mal bei der Breitfestlegung des Videos, ob du da nicht mit CSS Angaben wie vw (Viewport Width) und vh (Viewport Height) etwas besseres hinzaubern kannst?
    https://web-design-weekly.com/2014/11/18/vie…w-vh-vmin-vmax/

    if(!sleep)

    {$sheep++;}

    Zitat von DatFrank

    Kann ich irgendwie nicht nachvollziehen. Sowohl an meinem Arbeitsrechner als auch auf Laptop wird die Seite sauber dargestellt.

    Naja, es sind Screenshots, keine von mir manipulierten Bilder. Bild 1 ist auf Windows10 prof mit Firefox gemacht. Die anderen Bilder mit einem 10" Tablet von Huawei.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Hallo

    Ich kann Gastls Screenshots nur bestätigen. Für den Firefox und Chrome.

    Mit ein paar Änderungen ist die Seite leider nicht zu retten.

    Zitat

    Daran dass ich Bootstrap eigengesetzt habe kann es nicht liegen.

    Doch. Die Formel "Mit Bootstrap wird alles gut" ist falsch, obwohl das leider immer wieder behauptet wird. Für Bootstrap gibt es eine Anleitung beziehungweise ein Regelwerk. Wird das nicht beachtet kommt es in der Regel zu Problemen.

    Gruss

    MrMurphy