Html Seite immer vergrößert

[janabanana]

Hallo!
Da ich langsam an meiner Website verzweifle und ich zugegebenermaßen auch sehr, sehr bescheidene Html-/Css-Kenntnisse habe, frage ich jetzt hier. Ich habe irgendwie das grundlegende Problem, dass meine Seite immer irgendwie seltsam vergrößert dargestellt wird und ich habe keine Ahnung, warum. Zoome ich über Tastenkombinationen ein paar mal raus, sieht alles aus, wie ich das eigentlich haben möchte.
Das ist der Link: www.janaruehl.de
Vielleicht kann mir hier jemand helfen?
Danke und viele Grüße!

 

[Aaron3219]

Inwiefern vergrößert dargestellt?
Meinst du den main-Container mit den Bildern?
Dieser hat nämlich Scrollbalken. Ist das gewollt?

 

[janabanana]

Genau, alle Bilder sind riesig und die Schriften auch. Eigentlich sollte man die volle Breite, also drei Bildspalten auf den ersten Blick sehen. Und die Scrollbalken sind schon Absicht, zumindest dass man runetrscrollen kann..

 

[Aaron3219]

Prinzipiell nicht schwer zu lösen.
Jedoch wirst du merken, dass du einige Formatierungsschwierigkeiten finden wirst.
Auf Handys beispielsweise macht es Sinn, die Bilder untereinander anzeigen zu lassen.
Dein Container muss also via media-queries auf flex-flow: column; gesetzt werden.

Mir sind noch ein paar mehr Sachen aufgefallen, die ich erst klären möchte:
du benutzt bei height-Angaben immer die Einheit vw. vw steht jedoch für die Breite des Bildschirms, nicht die Höhe. Die Einheit für die Höhe ist vh.
Ich würde dir jedoch abraten, die Einheiten zu nutzen, da die Scrollbalken mit zum vw zählen. Benutze am besten %-Angaben.

Außerdem benutzt du position:absolute-Angaben, die nicht nur unnötig sind, sondern auch Riskant. position absolute sollte nur in seltenden Fällen angewendet werden.

Ich mach mal ein Beispiel fertig, wie man es machen kann, ich mach es als Edit rein, also ab und zu mal die Seite aktualisieren.

Allerdings würde mich dazu noch interessieren, wie du die Anordnung machen willst. Sollen es 3 Spalten sein? oder Alle nebeneinander in 3 Zeilen? Oder so wie jetzt auch, nur dass man nur Vertikal Scrollen kann, anstatt auch Horizontal.

 

[Aaron3219]

https://jsfiddle.net/Aaron3219/m9vnqwp5/2/

das wäre eine Möglichkeit wie man es machen kann.
Ab einer Fenstergröße von 600px und kleiner springt das media-querie ein, der die Bilder dann einspaltig macht.

 

[Tronjer]

Dafür gibt es doch Plugins.
https://isotope.metafizzy.co

 

[janabanana]

okay, das muss ich mir später noch mal genauer anschauen. Auf jeden Fall schon mal vielen Dank!!!!