@DylandeBruijn
Posted
@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
paddingto yourbodyelement so the card has some space around it on smaller viewports. -
You could add a
min-height: 100vhto yourbodyelement 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%onblockelements, 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
@vyacheslav-piskun
Posted
@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! 🎉
@DylandeBruijn
Posted
@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'.
@vyacheslav-piskun
Posted
@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?
@DylandeBruijn
Posted
@vyacheslav-piskun
You're correct! There probably is a problem with the screenshot generation then.
@vyacheslav-piskun
Posted
@DylandeBruijn
Thanks for the answer)
