Design comparison
SolutionDesign
Community feedback
- @sakthivel155Posted 3 months ago
1)let use <main> tag after body 2)let style directly to img tag not parent element .qr-code-img { display: block; // img default inline so we change that into block it take entire hight width: 100%; border-radius: 10px; }
- may be img not look good then use {object-fit:cover; }
don't over do this: .qr-code { background-color: #2c7dfa; //don't do padding: 20px; //don't do border-radius: 15px; //overwrites } .qr-code img { width: 100%; border-radius: 10px; //overwrites }
Tip : keep follow the layout use Pesticide webstore tool to view layout with outline
Marked as helpful0
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