Submitted about 2 years ago

HTML, CSS

sek-devops• 110

@devwinner-sek

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

I'm new on Frontend Mentor. This is my first challenge.

In responsive side, do i need to use media queries for this challenge ? (Because the content will be centered in all screens desktop, mobile)

Community feedback

talentlessDeveloper• 340

@talentlessDeveloper

Posted about 2 years ago

Hi @devwinner-sek,

It's actually not necessary you use media queries as everything is centered.

You can add margin:0 to the body to remove the default margin on it so that everything is properly centered especially on mobile view.

Also you should add padding-bottom to your container as some of the contents are hidden.

This is impressive work, welldone

Marked as helpful

sek-devops• 110

@devwinner-sek

Posted about 2 years ago

Ok. Thanks @talentlessDeveloper for your suggestions.

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello @devwinner-sek, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

Something I've noticed in your code is that in many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

✌️ I hope this helps you and happy coding!

EHO• 265

@hermannleboss

Posted about 2 years ago

hi @devwinner-sek, check

first mistake, To apply the align-items option for vertical alignment on flex boxes, the parent element must have a height greater than the child. By wanting to do this you have applied height 100% to the parent.

Whereas height 100% means takes the 100% height of my parent.

This is the error.

Since the parent's parent defaults to the height of its cumulative children.

So you should have used the Height = 100 vh option.

the vh unit is according to the height of the screen.

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