QR Component Challenge

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hello VidsHub,

  I just looked at your code and would consider some changes to get a cleaner code and get rid of the media queries completely.

  • Instead of setting fixed height on body, use min-height instead to make it flexible. There is also no need to set a width. The last two rules allow the content to be centered.

  body {
    font-family: 'Outfit', serif;
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    display: grid;
    place-content: center;
  }
  

  • Give the card some space on the sides for smaller screen sizes.

  main {
    padding-inline: 1.5rem;
  }
  

  • For the card class you actually need only the following rules.

  .card {
    width: 100%;
    max-width: 22rem;
    padding: 1rem;
    background-color: hsl(0,0%, 100%);
    border-radius: 1.2rem;
  }
  

  • The image needs the following rules to appear properly.

  .card img {
    width: 100%;
    height: auto;
    border-radius: 1.2rem;
  }
  

  With these little tweaks, your card will be responsive without the need of media queries. You could, though, keep some of the media queries for typography.

  Furhtermore, the <section> element is used to indicate a part (or section) of a web page. In this case the card component represents the entire page, so there's no need for this element.

  Hope this helps. Keep it up, and happy coding :).

  Marked as helpful

  0

  ---

  

  VidsHub•60

  @VidsHubPosted about 2 years ago

  @dusan-b Thank you so much! Truly appreciate your detailed feedback.

  The code you outlined is amazingly concise and I learned a lot about grid, padding-inline and keeping media queries to a bare minimum, if at all necessary.

  Again, thank you for taking the time to review my code. It gives me the confidence to move on to the next challenge with a better understanding of html5 and css.

  1