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.
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.
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?