Scheinbar Probleme mit media queries

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.

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?

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

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/

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.

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

Hi,

hast du mal die Einstellungen korrigiert.

Viele Grüße
Katarina1246