@krushnasinnarkar
Posted
Hi @Shakil-a,
Congratulations on successfully completing the challenge!
I have a suggestion regarding your code that I believe will be of great interest to you.
-
Instead of using
width: 45%
for large screens, usemax-width: 600px;
:@media (min-width: 768px) { main { max-width: 600px; } }
-
For screen sizes more than 768px, change the border radius of the
picture img {}
to:@media (min-width: 768px) { picture img { border-radius: 1em 0 0 0; } }
-
Add a margin of
20px 0
to the.description
,.category
, and.original-price
classes:.description, .category, .original-price { margin: 20px 0; }
-
Increase the padding of the
.content-container
class to around30px
:.content-container { padding: 30px; }
-
One more suggestion is regarding your media query usage. While going through your code, I observed that you use media queries for large screens. It's generally better practice to write code for large screens first (desktop-first approach) and then use media queries for smaller screens. This ensures a more responsive design.
I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful