Responsive landing page using css flexbox and media queries

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this challenge. Looking at your solution, I would suggest the following for you.

  • Inside the main remove the height and add margin like this...

  main {
    background-color: white;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 5px 10px 10px 5px hsl(212, 45%, 89%);
    margin: auto;
    margin-top: 10rem;
  }
  
  

  • Add padding: 1rem; in the .heading h1 rule set
  • Try removing the media queries and see if it still align in the center
  • It's bad practice to use section on every part of the HTML structure, section needs heading hierarchy, you could try like this...

  <main>
              <div class=" main-item qrcodeimg">
                   <img src="./image-qr-code.png" alt="qrcode.jpg">
              </div>
              <section class="main-item heading">
                  <h1>Improve your front-end skills by building projects</h1>
                 <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
              </section>
  </main>
  

  • Remove the tags that aren't utilized like the header and nav

  Hope this helps and Keep up the good work!

  Marked as helpful

  1

  ---

  

  Sachin Gurjar•40

  @S-chinGurjarPosted almost 3 years ago

  @RioCantre Thank you so much for the feedback. I'm just starting out with web dev . So it's really helpful to get such feedbacks . Once again thanks a lot. It was really helpful.

  1