Submitted 4 months ago

QR-code card solution

Viacheslav Piskun•20

@vyacheslav-piskun

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Next time I'll try to time the work.

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

no problems

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

The task is not big, but any comments are welcome)

Community feedback

Dylan de Bruijn•3,230
@DylandeBruijnPosted 4 months ago
@vyacheslav-piskun

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

Use of semantic HTML elements

Clear descriptive CSS classes

Use of CSS custom properties

Things you could improve ✍️

I suggest adding a bit of padding to your body element so the card has some space around it on smaller viewports.

You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

You don’t need to put width: 100% on block elements, they already take up the full width of their parents by default.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎
Marked as helpful
1
Viacheslav Piskun•20
@vyacheslav-piskunPosted 4 months ago
@DylandeBruijn

Thank you for the feedback!

I agree about the paddings; I forgot about them. They are indeed needed for smaller sizes. Thanks! I added a general wrapper with paddings so that the <body> has minimal styles. It's usually simpler for further development that way 😎

I don’t like using 100vh because, on mobile phones, part of the screen is hidden under the bottom bar. However, for desktop, it is the best option.

agree about 100% for block elements

And one more question)

Maybe you know why there's always a large white space at the bottom in the SOLUTION --+-- DESIGN section, no matter what styles I add?

I did the previous challenge, and everything was fine there, but here I've tried five different approaches with 100%/vh/dvh for body, and there's still a white space in the SOLUTION --+-- DESIGN section. On the actual website, everything works fine

Thanks for your answer and happy coding too! 🎉
1
Dylan de Bruijn•3,230
@DylandeBruijnPosted 4 months ago
@vyacheslav-piskun

If you don't like 100vh for that reason I suggest you use 100dvh, you can read more about it here.

To answer your question. You probably need to regenerate your solution screenshot. You can do this by pressing the red button 'Generate New Screenshot'.
0
Viacheslav Piskun•20
@vyacheslav-piskunPosted 4 months ago
@DylandeBruijn

If you don't like 100vh for that reason I suggest you use 100dvh

Yes, dvh generally works, if you don't mind Safari <15.4 😎

You probably need to regenerate your solution screenshot.

I regenerated the screenshot after each build, which is why there were five checks, exactly the number of free ones per month. It seems like there might be issues with the screenshot generation, or perhaps some other approach is implied for setting the body dimensions.

I looked at your solution, and it seems you also have a gap at the bottom of the screen, or you didn't regenerate the screenshot?
0
Dylan de Bruijn•3,230
@DylandeBruijnPosted 4 months ago
@vyacheslav-piskun

You're correct! There probably is a problem with the screenshot generation then.
0
Viacheslav Piskun•20
@vyacheslav-piskunPosted 4 months ago
@DylandeBruijn

Thanks for the answer)
1

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