Solution to task #487
Solution to task #487
Conversation
|
Problem with Brand new slider: It's have overflow hidden, but size of page is increased and looks so wide |
Banner must looks like that, but the rest of the app are not loaded (local host showing all fine) 2024-08-21.20-06-22.mp4 |
|
|
Was done earlier, it's only block scrolling to section ('cos it is wide and placed far away from left side of the page). |
|
Need a help with Home Banner part. It change size of page (not as much as slider earlier, but inflict the navigation) |
src/index.css
Outdated
| #root { | ||
| min-height: 100dvh; | ||
| display: grid; | ||
| grid-template-rows: auto 1fr auto; | ||
| } |
There was a problem hiding this comment.
I think problem lies not with banner but with this grid. You can try to fix it or completely delete it and then adjust the rest
There was a problem hiding this comment.
Grid was not a problem, but solution =) It fix my layout in good way and stopped change page wigth
There was a problem hiding this comment.
Hey.
Home view problems
- adjust sizes of banner images for lower resolutions (look on mockup)
- contrast here is bad
- add swipe so we can change images of banner on mobile
- back to top button sends me to 404 page
- this title on mobile should be centered
- There is no slider for Hot prices section
- when page is loading there is layout shift on this section - add some loading spinner and add some height so we won't see the shift
Cumulative Layout Shift (CLS) its one of core web vitals (https://www.4spacje.pl/article/core-web-vitals-co-to-jest here is the link to article about that topic)
| switch (sortType) { | ||
| case "Newest": | ||
| return b.year - a.year; | ||
| case "Alphabet": | ||
| return a.name.localeCompare(b.name); | ||
| case "Expensive": | ||
| return b.fullPrice - a.fullPrice; | ||
| case "Cheaper": | ||
| return a.fullPrice - b.fullPrice; | ||
| } |
There was a problem hiding this comment.
sort is not working cos sortType has additional quotation marks. These extra quotes prevent sortType from matching any of the expected values. if you replace them by e.g sortType.replace(/^['"]|['"]$/g, ''), sorting will work properly ;)
DEMO