Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Sithum Gimhara, congratulations for your new solution!
I saw your live site and the solution is amazing, the only thing to fix here is the image the is not scaling with the correct proportion. To fix this behavior follow these steps fo make it responsive.
Here is my advice for your:
Add
display: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
👋 I hope this helps you and happy coding!
Marked as helpful0@sithum-gimharaPosted about 2 years ago@correlucas it is very helpful. Thank you for going through the trouble to give me your feedback.
1 - @RadexmanPosted about 2 years ago
Hi there Sithum!
Good job on that project! If you don’t mind, I will provide you with some feedback :)
So I checked your code and it appears that you used <h3> before <h1> tag and <h1> is repeated twice. This is considered a mistake because when using headings we want to stick to the so - called hierarchy. You probably did it because the font size was correct but you can just change it in css in no time. We typically want to start from h1 because it should be a main title on our page and move our way to h6. Here is some good resource on that topic:
https://www.contentkingapp.com/academy/headings/
Aside from that the code looks good, you have a good naming convention for classes. Very readable and self-explanatory.
Overall amazing work on that project! I hope I was a little bit helpful for you. Good luck on next projects and happy coding!
Marked as helpful0@sithum-gimharaPosted about 2 years ago@Radexman I am grateful for your solution. It was very helpful to me as a beginner.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord