Develop#2742
Conversation
update checklist to be more generic
…-figma-link [Miami]: changed MyBike Figma link to a new version
update dependencies
Feature/prettier
add latest deps
Update package.json
natalia-klonowska
left a comment
There was a problem hiding this comment.
review wersji desktopowej:
- w całym projekcie masz zbyt małe marginesy boczne
- brak ikony nad tytułem
- popraw pozycję tytułu sekcji oraz jej font-size
- praktycznie każdy element w product-card__info ma błędne kolory, font-weight i font-size
- obrazki są zbyt małe
- wycentruj oraz zamiast ustawiać sztywne rozmiary kolumn dla zdjęć spróbuj użyć jednostek fr aby zwiększyć responsywność
- popraw stylowanie category-item__name (font-size, font-weight)
- zwiększ line-height elementów benefits-custom__item
- popraw rozmiar i kolor buttona oraz stylowanie jego tekstu wewnątrz
- łączny padding między buttonem a kolejną sekcją powinien wynosić 120px zamiast 180px oraz jest jeszcze większa różnica w odstępie od następnej sekcji (contact us)
- popraw rozmiar formularza, kształt inputów, ich kolor tła, oraz pozycję contact__info
- popraw kolor czcionek, font-weight i font-size elementów wewnątrz contact__info
| background-color: $color-dark !important; | ||
| color: $color-white !important; | ||
| border: 2px solid $color-dark !important; |
There was a problem hiding this comment.
staraj się nie używać !important
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
nie używaj * ponieważ wtedy nadajesz dany styl na każdy element co ma wpływ na wydajność
| padding: 0 20px; | ||
| } | ||
|
|
||
| .header { |
There was a problem hiding this comment.
każdy BEM block czyli np. container i header powinny być w osobnym pliku. stwórz sobie folder blocks i tam umieść wszystkie pliki z blokami BEM czyli również buttons i products które aktualnie są w utils
natalia-klonowska
left a comment
There was a problem hiding this comment.
- tekst pod zdjęciami nie powinien być wycentrowany
- zdjęcia powinny być większe
- odległość buttona od sekcji jest zbyt duża (180px zamiast 120px)
- dodaj line-height dla elementów benefits-custom__item
- paragraf benefits-custom__description powinien być węższy
- inputy powinny być tej szerokości co button
- zły kolor elementów contact__info-value
- błędny background color inputów
ikony otwierania i zamykania menu powinny być w tym samym miejscu aby łatwo i szybko można było od razu zamknąć menu po jego otwarciu
natalia-klonowska
left a comment
There was a problem hiding this comment.
wersja desktopowa gotowa 🚀 jak skończysz tabletową lub mobilną oznacz do ponownego sprawdzenia :) pamiętaj też o CHECKLIST
|
@natalia-klonowska prośba o dokładne wskazówki, co mam poprawić, żeby te wersje desktopowa i mobilna wyglądały prawidłowo. Siedzę nad nimi mnóstwo czasu i cały czas się to rozjeżdża. Przyznam, że już jestem tym mocno sfrustrowany. |
natalia-klonowska
left a comment
There was a problem hiding this comment.
- w sekcji "how to buy" brakuje ci elementu container przez co nie ma ona paddingów bocznych
- użyj elementu categories__grid do wycentrowania zdjęć razem z ich nazwami
- zdjęcia w sekcji recommended są zbyt niskiej jakości więc importuj z figmy je jeszcze raz i dodaj do projektu. usuń styl aspect-ratio oraz ogranicz szerokość elementu product-card i całość wycentruj
jeśli masz jakiś konkretny problem to możemy umówić QnA
Zibi95
left a comment
There was a problem hiding this comment.
Hej.
No parę rzeczy mi się rzuciło w oczy.
Brak rozmiarów czcionki oraz spacingu dla tabletow. Przechodzisz prosto z desktop na rozmiary z mobile.
tutaj pod zdjeciami opisy powinny byc po lewej, a nie wycentrowane, a przycisk powinien byc wycentrowany.

na tablecie ten layout powinien wygladac tak

a wyglada tak
To samo z contatc-us
kompletnie ominales layout dla tabletow.

DEMO LINK