Tribute Page, first project

Code Feedback
1

Hi,
I recently created my first Pen on CodePen. It is a tribute page about Alan Turing for the “Tribute Page” challenge. I used custom CSS and had some problems to position my elements, but at the end I ended up with a decent looking page. I would really appreciate some feedback on my project or any recommendations to make my code better.

My first pen

2

In general your tribute page looks pretty decent, but there are some moments I suggest you to change:

  • a horizontal scroll of the whole page, which shouldn’t be there. Pay attention to your margin’s or padding’s.
  • a big gap in the left column between the image and the text section.
  • try to rearrange your columns on the small screens, because the image feels to tiny and the list on the right too narrow in the mobile view. It would be great to place them one after another.
Screenshots

  1. The gap:

    image
    image1349×683 61.9 KB

  2. Problem with layout in mobile view:

    image
    image309×549 29.4 KB

3

Thanks for the repply. I already fixed (at least I think so) 2/3 of the issues you noticed. First, I placed my content inside a div with the class container which removed the horizontal scroll. Then, to remove the gap in the left column I simply increased the negative value of the margin-top property of the first paragraph, which doesn’t convince me 100% as a solution… Now I will try to fix the issues on the mobile view of the page. I appreciate your help a lot. If you have any recommendation it’d be a huge help as I’m still kinda new to web programming.

Updated page here.

A solution I’ll try later is to use breakpoints to different resolutions, would that make sense?

4

Finally I could make the site mobile-friendly by adding @media elements to my CSS.

Pen
Site on android simulation

Thanks a lot again for the help, I learned a lot while fixing the issues. Tomorrow I’ll put a footer on the pen and I think it’ll be enough to mark the pen as finnished. :grinning: