problem z display: flex; justify-content; align-times: center;

Question

Pomimo dodania display: flex;, justify-content: center; oraz align-items: center; grid podczas zoomowania idzie do góra jak na zdjęciu w przeciwieństwie do modala, który ma display: flex;, justify-content: center; oraz align-items: center;


Link do całego kodu: https://codepen.io/Nearr2020/pen/bGgoKad

Answer 1

Elementy .pp-tos i #main-container mają pozycjonowanie absolutne i ten drugi element jest pozycjonowany od góry w jednostce %. Poza tym (to już raczej nie ma wpływu na zachowanie przy zoom-ie, ale psuje layout), w .socials są potomkowie, którzy mają ustawiony float, co nakłada ich na .pp-tos.

Comments

czyli?

---

Powiedz, co boli, bo nie wiadomo, o co chodzi.  :P Widać testujesz stronę na jednej rozdzielczości, a sama strona nie jest responsywna, więc nie jest (jakby to powiedzieć) problemem .pp-tos czy #main-container tylko to, że tworzysz stronę nie dla użytkownika końcowego tylko dla siebie :P 

Na twoim miejscu przemyślałbym, czy nie lepiej z tą wiedzą co teraz posiadasz przepisać wszystko od początku :P Zrobić refactor jak już ma się wiedzę na dany temat to kilka godzin roboty, bo w ostatnich tygodniach powinieneś mieć już wiedzę o grid/flexbox, warstwach z-index, overflow oraz float i position :P Dałbym Ci na dodatek lekturę do poczytania przed snem odnośnie @media oraz jak ich użyć. :P

Całość nie jest jakoś bardzo skomplikowana i przykład działa tak, jak jest napisany. Wracając do pytania to modal jak ma position fixed oraz display flex z centrowaniem na x/y wypełnia cały ekran, więc treść modala będzie zawsze w centrum ekranu. Strona natomiast nie wypełnia całości a wydzieloną część ekranu.

grid-template-columns: 320px 340px 280px;
grid-template-rows: 70px 146px 302px 250px;

więc nie ma się co dziwić, że zajmuje tylko tyle ile jest napisane :P

https://i.imgur.com/j9X9c4H.png (screen z devtools z gridem)

---

 tylko to, że tworzysz stronę nie dla użytkownika końcowego tylko dla siebie :P 

W tym rzecz, że robię grę dla użytkownika końcowego