I was unsure of how to center vertically the element in teh <body>. Can anyone help me with that?
Dion
@dionlowAll comments
- @sergioaguiarSubmitted over 1 year ago@dionlowPosted over 1 year ago
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 helpful1 - @giovanaoliveira-14Submitted over 1 year ago
Tem alguma forma de ter escrito esse código de um modo mais fácil e curto?
@dionlowPosted over 1 year agoEspero 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 helpful0 - @pasan2002Submitted over 1 year ago
Feedback welcome
@dionlowPosted over 1 year agoHey 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 helpful1 - @eslam96Submitted over 1 year ago@dionlowPosted over 1 year ago
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 helpful0 - @suhendripurnamaSubmitted over 1 year ago
HTML and CSS Solution for QR Code Challenge
@dionlowPosted over 1 year agoReally 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 - @ayushrwt98Submitted over 1 year ago@dionlowPosted over 1 year ago
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 helpful0