McElroy Bros. tribute page

Just wrapped up my first project. Would appreciate any feedback, especially some tips or advice for improvement. This has taken me a little longer than it likely should have, I kind of made a mess of my code my first go around, and may have been over zealous with my #ids and .classes so if there is any advice for cleaning up my code, I would love to hear it.
There are already a few issues I’ve noticed that I havent quite been able to work out:

  1. Nav bar stretches past the linear-gradient of my header, on the right by a couple pixels.
  2. When using the nav links, it takes you to the correct portion of the page, however the nav bar itself gets in the way, covering begining portion of the article, causing you to scroll up to get to the begining of an article. Is there a way to adjust this?

Thanks in advance for taking a look, hopefully there are some MBMBAM fans out there that will enjoy this!

https://codepen.io/mjusi/pen/ROZEYx?editors=0100

I love the overall look and feel of the website. The animation on the title is really cute, and that transition on the nav links are so stylish.

I don’t know if this is the best way to deal with this, but I dealt with this issue by trying to eliminate the white gap on the sides by fiddling with the margins and expanding the widths of some of the outer elements.

I used the :target:before trick described in this stackoverflow post.

1 Like

Some suggestions for small improvements:

  • There are some alignment issues (items don’t look quite centered). The ones that are most noticeable is the caption beneath the main picture, list of videos, and list of podcasts.
  • There are some issues with gaps between certain elements. The most problematic one for me is the gap between “Video” and “Interested in more…”

Thank you for the tips above, I am going to give those a shot.

So regarding the alignment issues, that is something that has been frustrating for me, I’m aware of the issue and have tried to troubleshoot with text-align: center, which is in both the .podcast and .video classes as well as the #tribute-info id, which I believe is the parent container for both… Anyways, I’m having a tough time troubleshooting what causes the .podcast and .video text to have a greater margin on the left than the right when the paragraph above is using the same classes (.article .border) and seems to be centered.

The image caption was intentionally pushed to the left, but I think the rounded corners of the image make it appear sloppy. Do you think centered would be better?

As for the gaps between elements, I ended up using
because I became frustrated/lazy when I couldn’t get padding/margin to move the elements. Im wondering now if maybe I was applying it incorrectly or its more of a flexbox trick I am missing??

I know its a lot to ask, but any ideas?

Thank you again for your insight, it is greatly appreciated.