Submitted over 1 year ago

QR code component

mansoorkhan95• 10

@mansoorkhan95

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

Community feedback

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

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

However, I couldn't view your Github repository, but I try to help you through the live site.

HTML

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body in CSS file:
In order to center the card correctly, you'd better add min-height: 100vh to the body
For the color of the screen, you can use the recommended color in the body

body{
   font-family: 'Outfit', sans-serif;  // google fonts which is suggested
   min-height: 100vh;
   background-color: hsl(212, 45%, 89%);
}

If you use max-width instead of width and height, it makes the card responsive.

  max-width: 300px;
  /* width: 300px; */
  /* height: 400px; */
  /* position: relative; */

Hope I am helpful. :)

Marked as helpful

Apah• 280

@apah-dev

Posted over 1 year ago

I noticed there is no set margin between the container and the body making it look clogged up. Just setting a margin-top in the div containing the image and texts would fix this. Or setting some default margin in the body element would also work.

Marked as helpful

Francesco Merighi• 930

@francescomerighi1202

Posted over 1 year ago

Hi there!

I can't see the code of your solution (GitHub gives me a 404 error).

From what I can see from the live site, you haven't perfectly centered the card on the screen, I suggest you use flexbox or grid for that.

Another thing I seem to have noticed is that you have set a fixed height to the card, please don't do that, let the card adjust to the content automatically.

Sometimes setting a fixed height does more harm than good, believe me!

Hope I helped, if so, please mark this comment as helpful.

In any case, don't hesitate to look at my solution if you need to ;)

Marked as helpful

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