Skip to content
Submitted over 2 years ago

Desktop Solotion for QR Code Challenge

foundation
Sam-52•20
@Sam-52
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my first solotion and first project. I do not know if this is the best way to fix this problem. I think location of the paragraph text below is not good enough. Any feedback is welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • CamronWithrow•120
    @CamronWithrow

    Hi!

    I have a couple of comments that may help you out with your code.

    • The title for the card should be in an <h1> tag instead of an <h2>. Generally, you want to have a sequence of headings starting with <h1> and without skipping any headings below (so, you don't want something like <h1> followed by <h3>, or an <h2> without an <h1> above it). You can use CSS to style your <h1> so it looks like the design.
    • You also want to avoid using <br> to match the line breaks in the design. You can get the lines to break in the same place using the font size and the width of the card (your <div class="image">).
    • You can get the card centered in the browser viewport by making your <body> a flex container. In your main.css, you could add
    body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Then you wouldn't need to manually position the card.

    I hope this helps!

    Marked as helpful
  • Ecem Gokdogan•9,380
    @ecemgo

    Some recommendations regarding your code that could be of interest to you.

    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
    body {
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • When you use flexbox in the body, you don't need to use top, left and position in the .image to center the card
    • If you use max-width, the card will be responsive
    .image {
  max-width: 300px;
  /* width: 305px; */
  /* position: relative; */
  /* top: 20vh; */
  /* left: 80vh; */
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img
    .image img {
  width: 100%;
  /* width: 305px; */
  /* height: fit-content; */
}
    • Finally, the solution will be responsive if you follow the steps above.

    Hope I am helpful. :)

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord