Submitted over 1 year ago

Desktop Solotion for QR Code Challenge

Sam-52• 20

@Sam-52

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@CamronWithrow

Posted 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

Sam-52• 20

@Sam-52

Posted over 1 year ago

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

Ecem Gokdogan• 9,380

@ecemgo

Posted 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

Sam-52• 20

@Sam-52

Posted 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

Ecem Gokdogan• 9,380

@ecemgo

Posted 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.

Please log in to post a comment

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