Responsive Qr code scanner psge using css ,html5
Design comparison
Solution retrospective
I found very difficult to center the image of Qr and its takes a lot of time to know that how to manage its border radius.
Community feedback
- @MalexLuceroPosted over 2 years ago
Enclosing the image, title, and text into an article or div element will help. You can then center the article/div element without worrying about the image.
<article> <img src="yourImg.jpg" /> <h1>card title</h1> <p>card text</p> </article>
In the CSS, you could position the article element in the center by adding flex box to the body.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
css-tricks.com/snippets/css/a-guide-to-flexbox/ Here's my favorite guide on flexbox. :)
Keep it up!
0 - @wasswaenockmalePosted over 2 years ago
Try working on your width for the element you gave a background-color of white, then the rest will work very well. And you also need to focus on the giving a border radius to the qr-image. Then lastly and most importantly, try following the style guide, It will guide you on which font weights to use, font-family to use and background-colors to focus on in that particular project. Other congratulations for the zeal of wanting to focus on frontend
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