Submitted over 2 years ago

QR Code component

Benolísio• 60

@prettyBcoding

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

How can I apply/create the design depending on the device's screen size?

Community feedback

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello Benolísio ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

-Warp your card content around the main tag Ex: 👇

<body>
<main class="container">
*all you content here*
</main>
</body>

happy Coding😀

Marked as helpful

Account Deleted

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info

i hope this is helpful and goodluck!

Marked as helpful

Humas• 250

@dolomita28

Posted over 2 years ago

Hi, you could define a width to the bg div, so the card doesn't look so big. Then, use a padding for appliying the inner space between your card and image. You could also, instead of using margin to center containers (in this case the card), make use of flexbox. Hope it helps Best

Benolísio• 60

@prettyBcoding

Posted over 2 years ago

@dolomita28 Bro I read your feedback so I tried to do the challenge again using flexbox after reading an article about it on W3schools, but I couldn't do it... I think flexbox is a bit advanced for me 😅, but I keep studying it, so thanks for the tip

Humas• 250

@dolomita28

Posted over 2 years ago

@prettyBcoding yeeahhh, don't give up!!

Grace• 29,310

@grace-snow

Posted over 2 years ago

You also need to

remove all widths and heights on this
remove position relative and top from the img
remove the huge margins
make the img display block and width 100%
set the card to have a max width only, no height
give the card some padding
give the body some padding or the card a little margin just to stop it hitting screen edges
to center the card vertically and horizontally on the page use css grid or flexbox properties along with min-height 100vh on the cards wrapping element

Good luck

Grace• 29,310

@grace-snow

Posted over 2 years ago

You've removed an essential meta tag from the head that was in your starter html and controls how the solution scales on mobile. You need to put that back! This is tiny for me on iphone

Benolísio• 60

@prettyBcoding

Posted over 2 years ago

@grace-snow Hi! I didn't remove any meta tag 🤔. What's the meta tag?

Grace• 29,310

@grace-snow

Posted over 2 years ago

@prettyBcoding look at the starter files. It's right at the top of the supplied index.html

You have removed it

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