Design comparison
Solution retrospective
I encountered the same problem with the nft preview card with overlay not covering the whole image when resizing to other devices. Will try using the suggestion on the other project to fix the issue.
Community feedback
- @HassiaiPosted almost 2 years ago
wrap <div class="attribution"> in a footer tag to fix the accessibility issues.
Use the colors that were given in the styleguide.md found in the zip folder you downloaded
For the color of the image, give .main-image-container a background-color of soft violet and give the img a width of 100% height of 100%, object-fit: cover , mix-blend-mode: multiply and opacity of 0.8.
.main-image-container{ background-color: hsl(); } img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.8; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@deguzmanmadeleine22Posted almost 2 years ago@Hassiai I just did this and it worked great! Thank you so much for the suggestion! :D
1 - @manishdevelopsPosted almost 2 years ago
Hey Madeleine congrats on completion of this project... Do these changes for improvement of your project...
remove element with class .main-img-overlay completely
.main-image-container { background: rgba(170, 92, 219, 0.7); } .main-img { mix-blend-mode: multiply; }
Hope it will solve your problem.. keep coding =)
0 - @alishertoshmurodovPosted almost 2 years ago
Hi, Madeleine.
Great job working on this project. To solve the issue with your image overlay, you can try changing the width and height of your
.main-img-overlay
block to %100 instead of a fixed size.I hope it will help. Best of luck!
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