Skip to content
Submitted over 1 year ago

Desktop Solotion for QR Code Challenge

Sam-52•20
@Sam-52
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • CamronWithrow•120
    @CamronWithrowPosted over 1 year ago

    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
    1
    Sam-52•20
    @Sam-52Posted over 1 year ago

    I changed h2 with h1, removed <br> and centered it in proper way. Thank you for your advice. @CamronWithrow

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    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
    0
    Sam-52•20
    @Sam-52Posted over 1 year ago

    I followed your instructions and made the required changes. I removed position element and used flexbox instead. I would like to thank you for your advice. @ecemgo

    1
    Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    @Sam-52 I'm happy to help!

    If you try to use Flexbox or Grid, your project will be responsive. Also, using them makes your job easier as projects grow.

    1

Please log in to post a comment

Log in with GitHub

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