add solution #4777
add solution #4777
Conversation
There was a problem hiding this comment.
Great job on organizing the HTML and using SCSS effectively! 🎉 While there are a few suggestions for improvement, they don't impact the core functionality. Keep up the good work and consider the feedback for future enhancements!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/styles/catalog.scss
Outdated
| justify-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
Using both 'justify-items' and 'justify-content' on the same grid container might be redundant. 'justify-items' aligns the items within their grid areas, while 'justify-content' aligns the grid within its container. Consider if both are necessary for your layout.
| :first-child { | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| :last-child { | ||
| margin-right: 0; | ||
| } |
There was a problem hiding this comment.
The selectors :first-child and :last-child are not scoped to any specific element within the .header class. They should be applied to specific elements, such as .header__nav-item:first-child and .header__nav-item:last-child, to ensure they target the correct elements.
| :hover { | ||
| color: $accentColour; | ||
| } |
There was a problem hiding this comment.
The :hover selector is not scoped to any specific element within the .header class. It should be applied to a specific element, such as .header__nav-link:hover, to ensure it targets the correct elements.
| } | ||
|
|
||
| .container { | ||
| width: fit-content; |
There was a problem hiding this comment.
Using fit-content for the width might not be the best choice for a container. Consider using a more responsive approach, such as percentages or max-width, to ensure better adaptability across different screen sizes.
src/styles/product-card.scss
Outdated
| } | ||
|
|
||
| &:hover { | ||
| transform: scale(120%); |
There was a problem hiding this comment.
The scale value in the transform property should be a decimal value. Instead of 'scale(120%)', it should be 'scale(1.2)'.
DEMO LINK
TEST REPORT LINK
All component follow BEM and use SCSS
repaeted sizes and special colors are put to variables
Grid is used for the columns
cards are shown in 1, 2, 3 or 4 columns based on screen resolution
All changes on
:hoverare smoothCode follows all the [Code Style Rules ❗️]