@aratur
@kwabsvlado
Submitted
Hello this is my first Frontend Mentor challenge, i had trouble with overflow of text out of the div. I would appreciate some tips how to fix that. The only solution I found out was min-height : 0 but I'm not sure if that is the right way and whether it completely fixed it. . I would appreciate every feedback.
@aratur
Posted
Regarding your question about overflow, this is happening because you restricted the size (both height and width) of the container that you're using, and text is trying to squeeze until there is no more space available and it overflows. Remove this constraint on either width or height, and allow the div to grow with the content. Next focus on the size of the content so that it allows you to match the preview. U can read a more detailed explanation at developer.mozilla.org - sizing items
But as I see it, once you do the above, you're container will no longer align in the center, this is because of how you're centering the div instead of top: 0, left: 0, right: 0, bottom: 0, and height: 60vh, maybe try one of these cool methods w3schools - css align.
Good luck!
Marked as helpful
@JeanMieses
Submitted
Any feedback?
@aratur
Posted
Good effort!
I can share one hint. I noticed in your implementation - in the file HiringInfo.js. You've used key={Math.random()} - basically this approach will get React lost. This is because to checks if it has to update something in the DOM, it uses key to uniquely identify elements. If you set key to random, then each time React tries to do this check it will execute Math.random() again.., and it will have a different value each time . In this specific file it would be just fine to use something like key={language}
See more info on React website here
