@FluffyKas
Posted
Heyo,
Having some solid foundations before moving on to javascript is a great idea, it will save you from a lot of headache later. ^_^ Now some advice:
- It's best to center your component using grid/flexbox. Setting fixed margins won't work on every screen width, unfortunately. So you could add this to the
body, for example:
display: grid;
place-items: center;
min-height: 100vh;
-
Remove the height from your component, there's no need for it, in fact it is causing a bit of an overflow at the moment! Most elements have some default height that can be increased by adding padding, if needed.
-
"qr-maintext" should be a heading and "qr-subtext" a paragraph, not the other way around ^_^
-
Remove the <br> from your solution, that's used for other things. You could set a max-width on your element or add some padding left and right if you'd like the text to break at a certain point.
I hope this helps a bit!
Marked as helpful
@EuphoriaCXI
Posted
@FluffyKas Hey!
Thanks so much for your feedback, I appreciate it.
I updated a second project I just completed using your grid example which worked out great. When using margins, would it still be okay to use margin: 0 auto; when I want a certain max-width to be respected on the page?
I'll make improvements on my semantic HTML.
Thanks again!
@FluffyKas
Posted
@alwaysBeThankful Sure! Using margin: 0 auto and max-width is a good idea for centering most things. Centering elements with grid/flexbox like this will only work in specific use cases (meaning, you'll rarely have a single component dead centered in an empty page like in this challenge).
