Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Ryan, congratulations for your new solution!
๐ฏ Your solution its almost done and Iโve some tips to help you to improve it:
1.The NFT image is not displaying. Here's the correct import
<img src="./images/image-equilibrium.jpg" alt="" class="image">
you've used../
to import the image as it was in a subfolder.2.Make the container responsive with
max-width
instead ofwidth
:.card { border-radius: 20px; padding: auto; max-width: 375px; color: white; margin: 50px auto; background: #14253d; }
3.The best to way to have this image and every image responsive and easy to work, its by creating a general property adding
display: block
andmax-width: 100%
to make it fits the size of the container the image is inside and also respect the container width while scaling, add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
.card .image { border-radius: 20px; width: 22.2em; margin: auto; display: block; max-width: 100%; padding: 10px; }
โ๏ธ I hope this helps you and happy coding!
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