Feedback for my tribute page PLEASE!

Code Feedback
1

I just finished building my tribute page to Robin Williams, and all the feedback from you will be so much appreciated!
I’m still having trouble with placing the button, it wouldn’t stay at the same spot if I changed the view. I would also love some help for fixing it. Thank you so much in advance!

All the best,
Xiaodan

Project Link - https://codepen.io/Trucklette/full/EypQPW/

2

Hi Xiaodan! Really good work. I don’t know how to help with your button, but just from the looks of it I am impressed. The layout and font within the image is a nice touch as well. I also like the layout below with the columns. My only critique is to change up the colors and font families. I like the blue color you chose for the button; maybe start there.

1 Like
3

Fixing the button:

  1. Change position to relative.

  2. To align center, wrap the button in a div and text-align: center the div.

  3. Move the button div below the section it is in now. I think the button looks better when it doesn’t overlap with the white section.

  4. To adjust height change margin-bottom in section above.

Note for the future: Try to go for responsive design. Positioning a button absolute means it will look different on different screens.

I like the site otherwise but I felt the list of movies and awards would look better if the columns were of equal height. Also looks a bit funny that you’re inconsistent with how you mark the years. In movies column it’s (1990) after the film title and in awards column it’s 1990 before the award title.

1 Like
4

Thank you so much!
I have tried the way you suggested, and it placed the button at the bottom, which looked pretty neat!
But is there any way that I could keep the button on the image?

5

The problem with your button is that you set its position as absolute. That means it stays in the same spot no matter what happens. Because of that you need to define its position in relation to other elements.

For getting the “read more” button on top of the picture, set the Robin Williams picture as a background on the “thumbnail” div. Once you do that you can put the button inside the “thumbnail” div and adjust its position there.

To keep the text underneath the picture make it into its own div and adjust margin so you get it right underneath the image.

Here’s a fork I made from your page to demonstrate. This does create some new problems though on different screen sizes. I would suggest some media queries as a solution so you can keep the Robin Williams picture at an optimal size.

1 Like