Honestly, it’s one of the best tribute pages I’ve seen. Lots of polish, very professional, and it’s responsive. Only thing I noticed was your title could probably use a min-width since it does get extra-small when the width goes very narrow, though I understand doing that could cause problems with the title overlapping her face. Perhaps just move the title above the image at very narrow widths?
Seriously the best tribute project I’ve seen (including mine). Excellent styling.
Some issues with your choices re: responsivity and DRYing out your CSS
between 490 and 600 px, you have the 3 “panel” divs named “top” “middle” and “bottom” placed in a row beneath the <article>. They end up being clipped horizontally.
As a rule of thumb, if you take the right edge of a browser window and vary it from 4k to 325 px wide, there should never be a horizontal scrollbar. Vertical scrollbars are fine.
All 3 items have redundant styling. They should be a single class, like .panel so you “Don’t Repeat Yourself” and make it far easier to read your CSS.
Like @chuckadams said, your text can get tiny at certain widths (like ~494px, the “panels” text is small, and since “International Honors” already wraps and looks fine, don’t be shy about wrapping.
I know these things may seem nitpicky, but a big issue is that horizontal scrollbar (when over half of website views come on mobile), and a bigger issue (for the development of your “thinking like a programmer”, for pageload speed) is using classes. It makes your code more elegant, and makes it way more maintainable. Get into the habit now.
Thank you everyone for the kind words. And I absolutely welcome the nitpicky feedback. Truly.
@chuckadams I agree with your assessment of the text being too small. I just made the containing div a min-width and let the text overlap the hair and face; I think it’s still readable. If y’all disagree, I may just put a gradient textbox underlay with virtually no opacity, see if that does the trick.
@vipatron I realized the horizontal scroll bar was a result of me trying to get the header image to stretch across the page (right now it does not). I simply deleted the -10px margins and it seemed to do the trick. Further, I specify a panel class; I think this is a good deal more elegant. I kept the id’s as is, in the even that each one need be styled.
On thing I could not fathom, was the jQuery. I found a simple script that counts the numbers; what I couldn’t figure out was how to get it to trigger once the containing div appears on the screen (it doesn’t do much good if the numbers are already counted before the user scrolls there).
Thanks again everyone; I truly appreciate the feedback.
It just may be, but I’m so criminally ignorant of javascript at this time. I was investigating waypoints, thinking I could trigger the event when the class enters the viewport. But so far I’ve been unable to make it work.
Thank you kindly for the critiques. I did stack the aside a little sooner, right around 600px width. I think it works better now.
I found the typo and remedied that as well.
I have #img-text and #bottom h3 declared more than once as they are individually styled for responsiveness. Is there a preferred method of accomplishing this?
And the JS code worked perfectly. Thank you for this as well. In time I will even understand how it works.