Submitted about 1 month ago

QR code component

nyang550• 10

@nyang550

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

What challenges did you encounter, and how did you overcome them?

I had trouble with vertically centering the elements on the page because it requires a height on the container. The height of the container was just enough to fit all of its components. I ended up extending the height using vh and adjusted the amount so that the attribution fit on the bottom without causing a scroll.

What specific areas of your project would you like help with?

I often times find myself worrying about worrying about vertical scrolling on the page, especially when there isnt much content on it. This usually happens when I have to set the height for a certain element that should span the entire height. However when I use units such as vh, when I play with it in responsive mode through browser inspect, there is a scroll when I dont want there to be. Is there a way to fix this? Or should I just ignore it.

Community feedback

Lance• 1,580

@IzykGit

Posted about 1 month ago

Good work!

One issue that could be causing your styling issue is that you are setting an outer container instead of using the body itself as an outside container.

Instead you should have your outside container class just be the body itself! Then you can set the height of 100vh and it shouldn't have any extra created space on top and bottom.

Another thing you should try and do is use less divs in your code. While it is ok to use divs for styling, using a lot of them can make styling rather harder than easier in my opinion. You can do this project with only a single <main> element as the container!

Also remember semantic HTML!!!

Keep up the good work!

MikDra1• 6,090

@MikDra1

Posted about 1 month ago

Nice one @nyang550 😉,

If you want to make the card truly responsive I encourage you to set a percentage width on smaller screens. I would also add a max-width so the card won't get bigger then I want it to be

If this comment was useful please mark is as helpful 💗

Good job and keep going 😀😁😊

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