Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR CODE COMPONENT

Dev.Ng 50

@Dweirdgemini

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


styling the <p> tag gave me a serious problem, I am yet to do that and also the google font is giving me issues

Community feedback

@Giodosvani

Posted

Heyy, good night ;)

So, u don't need to add a 'class = img' to a <img> tag. You can still customize it on CSS just by using the "img {...} " (without the ".") and it will work -- also work to all imgs that are in your HTML document at same time, but in this project is just one. --

in the CSS font-size, i've seem u used "small". It works fine, but if you want more control about it, you can use numeric values for "rem", "em", "px" and others... just like this:

h3 { font-size: 2rem; } (i've heard that px aren't recommended to font-sizes because it is an absolute value.)

and a tip about the centering vertically in flexbox: Add a "min-width: 100vw;" and "min-height: 100vh;" to your parent (in this case, "body") This will make the container fit the size of the screen that the user is using.

if you not set the height to fit all the screen, it will use the min-value to fit the content, so it will not give the space to center vertically on the screen.

hope it works fine, thank you for reading and sorry if i take it too long <3

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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