CSS grid and flexbox solution

Community feedback

• 

  Talisson•190

  @talissoncostaPosted over 1 year ago

  Yep.. let's see :D

  I see that you applied a gap on qr-container

        <div class="qr-container">
          <img src="./images/image-qr-code.png" alt="QR code" class="qr-image">
          <--- It will generate a gap here, between `image` and `text-container`, which is pretty good, you don't need margins between the itens, and also if you need to add a new item inside `qr-container` it will get the same space, making it consistent --->
          <div class="text-container">
            <h1 class="title">Improve your front-end skills by building projects</h1>
            <p class="subtitle">Scan the QR code to visit Frontend Mentor and take your
              coding skills to the next level</p>
          </div>
        </div>
  

  So the that is a great start using gap congrats!! :D

  Let's check your css...

  .title,
  .subtitle{
      margin:0; 
      padding-inline:28px; // what if instead of setting a padding here, you set the same width as you've set on the img ? on `text-container` =>   `width: 90%` and apply  `text-align: center`
  
      text-align: center;  // so it could also be removed
  }
  .title{
      margin-bottom: 20px; // you could remove this margin, just applying gap on `text-container`
  
      font-size: var(--title);
      font-weight: 700;
  
      color:var(--dark-blue)
  }
  .subtitle{
      margin-bottom: 40px; // instead of margin, try to explore padding. In order to achieve this, you could just add a `padding: 40px` on `text-container`
  
      font-size: var(--pharagraph);
      font-weight: 400;
  
      color:var(--grayish-blue);
  }
  

  I hope it helps!! ping me if you need extra help :D Happy coding!

  Marked as helpful

  1
• 

  Talisson•190

  @talissoncostaPosted over 1 year ago

  Hello, the solution seems to be nice. I just have some tips:

  1. Use semantic tags. You should use the tag main to wrap up your solution.
  2. As you are using flex try to use gap instead of margins
  3. Design 3.1. The QR Code image border-radius seems to be different from the container on the designs and on your implementation it seems to be the same. It seems to be a bit off to me. 3.2 Text seems to be wider than the image. Try to set the text same width as the image and use padding to adjust the spacing around.

  Congrats for the solution and for great use of css variables. I hope it helps.

  Marked as helpful

  1

  ---

  

  CRKNO•50

  @CriKnoPosted over 1 year ago

  @talissoncosta thank you! I will try to fix that!

  1

  

  CRKNO•50

  @CriKnoPosted over 1 year ago

  @talissoncosta Hello! I try to apply all of your corrections. I would be really greatfull if you give me your opinion again. This is my first time using gap, I don't know if I used it right

  1