Hi Everyone,
Thanks for taking the time to check out yet another tribute page! I welcome any and all feedback including (but obviously not limited to) design tips, suggestions for best practices, how to make it more responsive (especially that book section - ugh!), etc.
Also, although I’m pretty satisfied with my first project, if anyone has any ideas on how to vertically center the stats and book-info boxes I’d be so grateful.
Here it is:
Thanks again! 
Nice work even with the odd sizes of the text boxes!
Great job! Gymnastics for life!! Haha, She’s a great Gymnast, and I think this website is great too! Keep up the awesome work!
No one’s mentioned it so I will. The book cover is overlaying parts of the book info. You should look into z-index
Thanks! Would you recommend that the boxes be equal size even with the extra blank space it would have?
Thanks! She’s incredible!
I recommend not using z-index to fix problems with overlap, since that will obscure a good portion of the book when the window is narrow . Rather, stick both elements in a flexbox container and that will cause the elements to be side-by-side when the browser window is wide, and vertical when it’s narrow. FCC has a mini-course on using flexboxes, but for this it’s as simple as:
<div style="display: flex;">...your divs here...</div>
(You can of course also use classes and separate CSS)
Thank you for your feedback! Does the overlay occur on full screen or on mobile/resizing? I tried using z-index but it just made the text overlap the book instead (when resizing). Do you have any ideas for what might help keep them separated?
That’s an even better idea!
Thank you for your input! I’ve gone back through the mini-course and tried your suggestions (I also tried using a media query to sort it out when in a narrow browser) and I’m still not having any luck. Is there anything you can point to in my code that would make these two elements different than the “Biography” and “Stats” section which do the right thing? Is there some type of adjustment I should make because there’s a picture involved? I will continue to research and tweak to see if I can figure this out.
You may need to provide a min-width property to your divs to keep them from getting “squished” by the containing flexbox. That should force it to reflow the element to below the previous one. Take care not to make min-width too wide, or it’ll scroll off to the right on narrow devices (think phones). min-width might be something you need to vary by device width, using a media query.
Another alternative would be to use something like bootstrap, which you can see in use on my own tribute page: https://codepen.io/chuckadams/pen/NxJaeE
Great idea! Thank you so much. I’ll play around with it some more when I get a chance - I’m sure I’ve got more than enough information to figure it out.
Nice page, by the way! Love me some Mingus.
Thanks again for your help!
Hello @Munoz 
The subtitle font and the photo’s description should be have a bigger font, as it’s hard to read. Specially the description.
When going mobile, the title breaks the surname and the photo kinda hides it. It should scale depending on the screen size so that mobile users can see the website. Photo also covers the subtitle when showing the page with 560px or lower.
When in mobile the Biography and Stats should stretch to the right, as it is, they are just cut in haft with no apparent reason. Also they don’t have any top / bottom margin, which makes them glue to one another.
On the book section, the book image stretches without proportion, making the height almost as double of the width. Text of the book section just shrink and does not go under the book picture or something like that. You should move the column under the image for better reading.
Finally the link on the blueish background makes it difficult to read, I’d change for something like the gold yellow.
Hope it helps
I think biography and stats are of different box heights and they have very small spaces between them.