Große Bilder mit Überlauf: versteckt; nicht zentriert in Firefox

Question

Ich versuche, die horizontale Bildlaufleiste (A) loszuwerden, aber als ich meine Fußzeile änderte meine Bilder durcheinander (B) und ich bin mir nicht sicher, was passiert oder was zu tun machen.

A: Unerwünschte horizontale Scroll: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/

B: Kommentiertes Fußzeile und die Bilder gehen wackelig: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/

Zunächst meine Fußzeile Regelsatz Ich habe versucht, von sich ändern left: 20px; zu margin-left: 20px; oder padding-left: 20px; hat, wenn Ich bin auf dieses Problem gestoßen! Ich spekuliere, dass es mit den tatsächlichen Auflösungen der Bilder zusammenhängt, aber ich bin mir nicht sicher.

Bei der Größenänderung des Browsers werden die Bilder zentriert.

Ich fragte auf eine Slack-Gruppe vergebens, ich habe es nur auf verschiedenen Browsern getestet und es scheint, dass dies ein Problem nur bei Firefox ist. Auf Chrome und Edge laden sie kein Problem ... Also ich denke meine aktualisierte Frage ist, wie man das für Firefox-Benutzer beheben kann.

EDIT: gehen, um die Website zu aktualisieren, so wird das Problem nicht in der (A) -Link sein. Aber die TEST-Seite (B) ist immer noch offen und kaputt. Vielen Dank!

Answer 1

Firefox könnte nur position: absolute; Bilder innerhalb display: flex; position: relative; justify-content: center; align-items: center; divs seltsam machen!

fixierte ich das Problem, indem die align-self: flex-start; und top: 0; Erklärungen zu den .mission-child img und .locations-child img Regelsätzen.

Vielen Dank für die Hilfe!

Answer 2

Ihr footer Element eine auto Breite (die die volle Breite des Bildschirms ist, weil es ein Block-Level-Element ist), aber dann sagen Sie left: 20px (mit position:relative kombiniert), so jetzt es ist die volle Breite des Bildschirms aber es beginnt 20px von links, was bedeutet, dass es immer 20px von der rechten Seite des Bildschirms entfernt ist.

padding-left:20px über die footer wird das gleiche Ziel erreichen und nicht die horizontale Bildlaufleiste verursachen.

Answer 3

Ihre Bilder scheinen Standard auf der linken Seite in Firefox zu sein, weil Sie position: absolute auf .mission-child img haben. Die Einstellung auf position: relative scheint die Bilder für mich richtig zu zentralisieren.

Ihre Fußzeile belegt die gesamte Breite auf der Seite und zusätzlich left: 20px. Diese verschiebt von links, was zu einer Gesamtbreite von 100% + 20px führt. Um den darin enthaltenen Text, aber nicht die Fußzeile selbst zu kompensieren, suchen Sie nach padding-left: 20px.

Hoffe, das hilft! :)