Hey FCC community, this is my first post - yet another new coder seeking feedback on my first completed project! It’s a tribute page to fantasy author N.K. Jemisin, and it’s pretty simple but I’m fairly proud of it.
Would love any feedback you might have on ways to improve, streamline, or clarify the code. My CSS organization is still a bit wobbly…
Thanks for the encouragement and feedback! I appreciate you pointing out the head/header discrepancy, and the suggestion to use a class for h2 and h3 (the latter of which I added last minute, haha). I’ll work on those modifications to the code
Hi there! I couldn’t find a flex property that would keep the border outside the content, so I ended up just adding an overflow (hidden) to #tribute-info. It’s not the most elegant solution, however. What do you think?
If you (or anyone else) have any other thoughts or ideas for actually making the text shrink accordingly with the border no matter what, I’d love to hear them! Thanks again.
The ul content is overflowing the container, it doesn’t really matter if you hide it or not.
One option would be to use an auto margin and a max-width instead of the fixed margin you have now. At least then the overflow doesn’t happen until the page is pretty narrow.
#tribute-info {
display: flex;
justify-content: center;
border-color: black;
border-width: 10px;
border-style: double;
padding: 20px 20px 30px 15px;
/* margin: 0px 100px 20px 100px; */
/* overflow: auto; */
margin: 0 auto;
/* adjust as you see fit */
max-width: 980px;
}
You might also set word-break: break-word on the ul element.
Then the container will overflow the page instead of the content overflowing the container. But it’s still an overflow, so you can pick whichever you like.
But at that size (with the settings I posted) it’s fine if the page has some overflow. Below 320px it’s not uncommon to have a bit of overflow.
I might suggest changing the padding on the body to use the vw unit (viewport) or adding a media query to lower the padding at smaller screen sizes.