QR code component

Community feedback

• 

  Elio Flores•400

  @eliofloPosted almost 2 years ago

  Hello,

  Your solution is excellent - it has a simple HTML structure and styling, and looks great!

  I can offer you some advice or alternative methods to style your CSS:

  • To center an element, you can use either flex or grid. If you choose to use grid, it can be achieved in just two lines of code:

  body {
      display: grid;
      place-items: center;
  }
  

  • If you know that all child elements have the 'text-align: center' property, you can set this property to their parent element. In this case, you can set this property to the main element and remove it from the p and h1 elements.".

  main {
      // code ....
      text-align: center;
  }
  

  • For img element:
    • The default value for the height property is 'auto', so it can be omitted if you want to use the default value.
    • If you are not moving the element from its default position, using the 'position: relative' value is not necessary.

    img {
        width: 100%;
        border-radius: 10px;
    }
    

  I hope my tips are helpful to you. Keep up the good work!

  Elio Flores

  Marked as helpful

  0

  ---

  

  Garvin Felix•20

  @felixgn9Posted almost 2 years ago

  @elioflo thanks...that's really helpful. Now I can use less code

  0
• 

  Manish Patel•730

  @savvystriderPosted almost 2 years ago

  The "Resources" (https://www.frontendmentor.io/resources) section of Frontend Mentor has a list of different resources to learn CSS and JS.

  0