Project 1 - Tribute Page - How to improve this botch job

Hello!

I’ve recently finished my first project which can be found here: https://codepen.io/BuzzsawB/full/bKGpEr/

Disclaimer: It’s largely an inside joke that so called insiders would be unlikely to get.

Simply put I’m reasonably happy with the end outcome, other than perhaps the square edges of the embedded youtube video compared to the other edges with applied border-radius, but I’d heard this was a rather tough job and certainly my attempts to rectify it didn’t work.

However I’m not particularly confident that the methods I’ve used to are the most effective, and I’m aware in particular that it doesn’t look anywhere nearly as good in mobile format, particularly with the font not matching but this should be a simple fix.

So I guess I have the following questions:

  • Should I be using media queries to resolve issues of spacing for mobile? I’m particularly looking at the two grid items on the bottom as being of the most concern.
  • Is using padding the best way to position items inside of grid items?

Any other advice that can be offered in this regard would be appreciated! I think probably the most pertinent is perhaps not to over complicate my first project in this way!

Kind regards,
Lewis

Dear Lewis, I see you layout so hard!

Layout is almost broken, check what I got for mobile:

use a simple responsive grid layout if you like 1-col/2col approach mode, something like this layout or this one.

I suggest you start a new layout from zero. Before you add any content, make sure it’s responsive. Simply give each container/section a background colour to see if they place correctly on page, then add contents.

Be patient, no rush do the job great.

Keep goin on great work, happy programming.

Hi Lewis,

I like your tribute page. It’s simple!
I’d work at the text in white (paragraphs in the middle of your page), it’s difficult to read.

Good luck! :slight_smile: