@0xabdulkhalid
Posted
Hello there π. Congratulations on successfully completing the challenge! π
- I have a suggestion regarding your code that I believe will be of great interest to you.
BODY MEASUREMENTS π:
- Using
height: 100dvh
forbody
can cause elements to be cut off during landscape mode on mobile devices. This is because the viewport height (vh
) changes when the device is rotated, and settingheight: 100dvh
forces the element to match the new viewport height, potentially cutting off content that exceeds the new height.
- For example; if we set
height: 100vh
then thebody
will have100vh
height no matter what. Even if the content spans more than100vh
of viewport.
- But if we set
min-height: 100vh
then thebody
will start at100vh
, if the content pushes thebody
beyond100vh
it will continue growing. However if you have content that takes less than100vh
it will still take100vh
in space.
- To avoid this issue, it is generally recommended to use
min-height: 100vh
ormin-height: 100dvh
instead of setting a fixed height. This way, the element will adjust its height based on the available content while still covering the viewport height as a minimum.
- If you want to ensure that the element always covers the entire viewport without cutting off content, you can combine
min-height: 100vh
(ormin-height: 100dvh
).
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@pamplito
Posted
Hello @0xabdulkhalid,
Thankβs a lot for your feedback!
Iβll try it today and do some test to really understand how it work.
Have a good day π