QR-code-challenge

Community feedback

• 

  David Upegui Londoño•40

  @DavidUpeguiPosted over 2 years ago

  Hi there!

  Respect the problem about the resizing of the page: Remember, there are two main ways for building the structure of the page; using dthe grid system and the flex system. The grid system works like a table, is good for ordering the items in two dimension (in the y and x axis). The flex system is more flexible, is specially good for ordering the items in one dimension (like centering, spacing between items, etc).

  For this excercise the best way were using the flex attribute. By the way, you did a good job and specially about your problem, you should try to change the size of the cells, I mean, you define the cells using "fr", if I'm not bad, the "fr" is a relative measure respect the screen size, so, if you write, for example "5fr" it means that the screen will be dividen in 5 cells with same size, so, if you resize the screen, the "fr" will be changed too.

  Good Luck.

  PD: Sorry if my English is bad, isn't my native languaje.

  Marked as helpful

  1
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hey Shanks!

  Change the image like this <img alt="image-qr-code" src="/images/image-qr-code.png"> to <img alt="image-qr-code" src="./images/image-qr-code.png"> as it is not detecting your image because of how you have placed it.

  Then to make it well centered to the body add:

  body {
  
      display: flex;
      justify-content: center;
      align-items: center;
  
  }
  

  And to the card edit its attributes so that it looks like this

  .container {
    display: grid;
    grid-template-rows: repeat(3, 2rf);
    width: 250px;
    height: 400px;
    border-radius: 10px;
    background-color: hsl(0, 0%, 100%);
  }
  

  If you keep it this way when it gets smaller it will not deform because the percentage makes it squeeze and deform better give it a fixed size and I am removing the margins since we center it with the flex of the body and with this I think it will be 10 out of 10.

  I hope my comments are helpful hehehe.

  Marked as helpful

  0

  ---

  

  Ahmed Ahmed•10

  @1stGosuPosted over 2 years ago

  @Sdann26 thank you for the helpful reply.

  1
• 

  Isabella Alves•40

  @bellaalvesPosted over 2 years ago

  Hello Ahmed! I think the problem is in your width inside container. My advice is changing to px rather then percentage. For example:

  .container { width: 375px; }

  Good luck and keep coding! =)

  0