I was unsure of how to center vertically the element in teh <body>. Can anyone help me with that?
Dion
@dionlow
All comments
- Dion• 150
@dionlow
Posted
Another option to center a div is to leverage flexbox. Flexbox turns the layout into a two dimensional axis: main axis and cross axis. You you can then center both axis if you would like.
The
align-items
property will align the items on the cross axis. Thejustify-content
property is used to align the items on the main axis.You can review concepts from flexbox here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Marked as helpful
1 Tem alguma forma de ter escrito esse código de um modo mais fácil e curto?
Dion• 150@dionlow
Posted
Espero que puedas traducir. Mi español es muy básico.
Some small tips if you would like to use less code. You can rely on css defaults, for example you can remove lines of css to see if you actually need those lines. One thing to consider is that even though
flexbox
is very powerful, you may not need to use it if you are comfortable using theblock
default.Another idea is using utility classes. You have repeated the following in several classes
flex-direction: column; justify-content: center; align-items: center;
You can either refactor this layout as a class called
flex-column-center
and just reference the class in the html instead of defining it several times.Marked as helpful
0Feedback welcome
Dion• 150@dionlow
Posted
Hey your project looks solid!
Your github project structure nests the project into two folders like
QR-code-component/qr-code-component-main/index.html
to get your project. You can remove the nested folderqr-code-component-main
so that when you go to the repo you can see theindex.html
file directly which will allow you to see theREADME.md
directly from github. I actually made the same mistake since I made my own folder and the project unzipped it's own folder.<p> color
You have the color set to the same as the background. You can use the darker colorhsl(220, 15%, 55%)
in the style guide to make it more visible and match more closely to the designMarked as helpful
1- eslam mamdouh• 10
@eslam96
Submitted
Dion• 150@dionlow
Posted
I like the BEM css syntax that you used and the specific font embed.
I would update your view code solution to this url.
https://github.com/eslam96/frontendMentor-qrcode
Clicking on it from frontend mentor website goes to:
https://github.com/eslam96/eslamm96-qrCode.github.io
which gives a 404.Marked as helpful
0 - suhendripurnama• 40
@suhendripurnama
Submitted
HTML and CSS Solution for QR Code Challenge
Dion• 150@dionlow
Posted
Really solid submission. The component is centered and has all the right colors.
Some Feedback: It doesn't look like the fonts are loading as the link you provided as the source is the page link. You can either swap our for the embed link or download the fonts in the repo and import directly.
0 - Ayush Rawat• 10
@ayushrwt98
Submitted
Dion• 150@dionlow
Posted
Really solid combination of both bootstrap and standard css. You can polish up the design by adding the background color, the box shadow, and center the text .
Marked as helpful
0