Would really appreciate feedback on Tribute page

Tim Berners-Lee tribute page

Would be grateful for any (especially negative) feedback on this simple tribute page.

What have I done wrong?

Tell me please.

The layout looked ok to me on fullsize screen but ridiculous on phone size (and pretty much the same if coded the other way round - ok small screen, bit silly large screen). Not sure how we are meant to deal with this before we get to media queries, bootstrap etc. Any advice welcome.

Thanks,

Stewart

Ur image is not centered. Use display : block in ur CSS code

Thanks for taking the time to look and get back to me.

I am not sure what you mean. The css is…

img {
  padding: 40px;
  display: block;
  max-width: 100%;
  width: 80%; 
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

The image looks centred to me and has “display: block” as you suggest.

I don’t doubt that I could be missing something but (in the nature of missed things) I can not see what it is.

Any further help appreciated.

thanks,

Stewart

Hi.
Try to play with padding and width of your containers.
For example: if you styles any container with width: 40%; then it will be 40% of 1000px (400px) and 40% of 500px(200px) plus and at 500px viewport it will seem so tight and hard reading if it is a text.
If you want a fix width of #tribute-info for example you can use max-width css rule for styling.
And @Pooja1308 right. Your image has padding and at small viewport it looks bad because of padding. Try to solve it with margin to img’s container.

Right,

Off to have a think about margin and padding.

Thanks

Stewart

Ah!
I see now.
The image stays centred until you reduce the screen with to about 350px, then , as you keep reducing, gets displaced to the right.

Thanks

Stewart