@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
Instead of adding borders separately to each column, consider applying a border to the entire component. Then, use
overflow: hidden
to cut off the excess and make the border apply uniformly to the entire component. This can provide a cleaner and more consistent appearance..grid-container { border-radius: 5px; overflow: hidden; } /* And remove ALL border-radius from the styles */ .sedans { /* border-bottom-left-radius: 5px; */ /* border-top-left-radius: 5px; */ }
-
The margin on the body is too large, enough to distort the solution on mobile devices. Also, using margin on the body element can result in unnecessary scrolling in some cases. You should use a modern method to center it, such as flexbox or grid, and also employ
max-width
on the component to prevent it from elongating too much.body { /* margin: 200px 238px; */ margin: 0; display: flex; min-height: 100vh; justify-content: center; align-items: center; } .grid-container { border-radius: 5px; overflow: hidden; max-width: 900px; /* Add this new line */ }
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
@belkysupreme22
Posted
@MelvinAguilar thanks for your feedback, it really made my design look closer to the provided one. i have updated the codes and you can preview the updated site for the outcome