Skip to content
OverviewSolutions
2
Comments
6
Dion
@dionlow

All comments

  • Dion•150
    @dionlowPosted almost 2 years 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. The justify-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
  • Dion•150
    @dionlowPosted almost 2 years ago

    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 the block 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
    0
  • Dion•150
    @dionlowPosted almost 2 years ago

    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 folder qr-code-component-main so that when you go to the repo you can see the index.html file directly which will allow you to see the README.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 color hsl(220, 15%, 55%) in the style guide to make it more visible and match more closely to the design

    Marked as helpful
    1
  • Dion•150
    @dionlowPosted almost 2 years 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 helpful
    0
  • Dion•150
    @dionlowPosted almost 2 years ago

    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
  • Dion•150
    @dionlowPosted almost 2 years 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 helpful
    0