QR code components

Community feedback

• 

  Raphael Bröderbauer•770

  @DigitaleWeltLibraryPosted 6 months ago

  Hey, good soluten but i have some points for improvment.

  • Firstly i want to center the card in the middle of the screen. Therefore i use grid . Then i have to to say that every element in the grid container should be centered verticaly and horicontaly. Normaly every adult container has the height of all the children. We want the full theefore we use height (you can use min-height) too. 100dvh is the full height of the screen without the searchbar.

  body{
      display: grid;
      place-items: center;
      height: 100dvh;
  }
  

  • The card: The gridcentered the card in the middle of the screen, therefore we didn`t need the margin anymore. Never declare the height, because when the headline or the paragraf is longer the content overlaps.* Instead of using pxuse the min function. It means when the screen is widther than 350px the width is equale to 350px. When it´s no widther than 350px it´s 96dvw of the screen width. (The min function makes it easier to make websites responsive. 😉)

  .back{
      /* width: 300px; */
      /* height: 450px; */
      /* margin: auto; */
      padding: 10px;
      width: min(90dvw, 350px);
  }
  

  • The img: As i said before never use px. The best choose is to use % as i used in the CSS. Then use aspect-ratio to make the width and the height the same. And again it´s responsive 😉.

  img {
      border-radius: 20px;
      /* width: 280px; */
      /* height: 280px; */
      aspect-ratio: 1 / 1;
      width: 90%;
  }
  

  • You didn´t need the div with the img in it. This is how I would set it up

         <section>
              <img src="PATH" alt="TEXT" >
              <h1>TEXT</h1>
              <p>TEXT</p>
          </section>
  

  Maybe it helps you to see my solution of the challenge.😁

  I hope i could help you. Happy coding 😊

  Marked as helpful

  1

  ---

  

  Codevkreate•40

  @CodevkreatePosted 6 months ago

  Wow thanks a lot I would definitely look into this to improve the code 😊@DigitaleWeltLibrary Edit: So I tried what you recommended and it tells good but I don't know much about the min function so I'll go learn more about it and improve the code

  0
• 

  thofelix6•40

  @thofelix6Posted 6 months ago

  you can add in you component class the code below for you to center your main component:

  .my_class{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) }

  Marked as helpful

  1

  ---

  

  Raphael Bröderbauer•770

  @DigitaleWeltLibraryPosted 6 months ago

  @thofelix6 Hey,

  a better choose is to use display: grid; or display: flex;.

  Happy coding 😁

  Marked as helpful

  1

  

  thofelix6•40

  @thofelix6Posted 6 months ago

  @DigitaleWeltLibrary

  Ok I see , you're right thanks 😁

  1

  

  Codevkreate•40

  @CodevkreatePosted 6 months ago

  I'll also check this out thanks. @thofelix6

  0