Rozpisanie responsywnego projektu html/css w Angular

0

Cześć.

Mam projekt który napisałem jednak nic się do końca nie spina. Projekt nie jest ani responsywny oraz prawa strona nie jest tej samej długości co prawa. Czy ktoś mógłby mi pomóc rozpisać projekt wszystkie klasy i projekt w HTML/CSS uwzględniając że jest to projekt w ANGULAR. W załączniku jest projekt. Na górze jest oczywiście header. Po Lewej jest panel boczny który ma 7 divów. W tych divach tam gdzie są te "kostki" należy uwzględnić że są *ngIf'y i pierwsze 3 są muszą być w flex-direction : row a następne w flex-direction:column. Szósty div ma wyśrodkowane *ngify oraz pod spodem 2 buttony na dole tak samo ten ostatni div tylko że on ma mieć max 300px i ooverflowX:scroll, na dole również 2 buttony . Mogą mieć np widht 40% (to już pełna dowolność).

Ważne jest dla mnie to że wszystkie divy oprócz ostatniego mają rozciągać się responsywnie na tyle na ile potrzebują długości. Nie musi być to dostosowane na aplikacje mobilne perfekcyjnie. Bardziej na rozmiary pod desktop.

Panel prawy jest dla mnie najtrudniejszy bo ma mieć dla mnie po prostu takiej samej długości jak panel lewy i rozciągać się tak długo jak lewy

screenshot-20210728160618.png

3

prawa strona nie jest tej samej długości co prawa

To bardzo kiepsko. Mam chociaż nadzieję, że lewa strona nie jest dłuższa od lewej (ewentualnie może być krótsza) :P

Nieco poważniej - raczej bez kodu nikt Ci nie pomoże. Wrzuciłeś jedynie wizualizację tego, co chcesz osiągnąć, ale nie pokazałeś tego, co już masz napisane - więc nikt Ci nie poprawi błędów.

A jeśli oczekujesz, że ktoś to zrobi za Ciebie od zera - to zła kategoria, powinieneś założyć wątek w https://4programmers.net/Forum/Og%C5%82oszenia_drobne

1

Spotkam kiedyś frontendowca, który będzie pisał gramatycznie i z poprawną interpunkcją?

0

Macie rację bez kodu proszę się o gotowca. Nie chcę rozwiązania na tacy. Nie rozumiem jeszcze flexboxów do końca. Mam problem aby ułożyć coś w 2 kolumnach jeżeli coś jest ngIfem oraz następnie chciałem wstawić pod spodem buttony tak jak na rysunku ( dwa ostatnie divy) .

Przesyłam swoje wypociny :

https://codepen.io/blazo123/pen/eYWLadJ

1 użytkowników online, w tym zalogowanych: 0, gości: 1