Would really appreciate feedback on Tribute page

Would really appreciate feedback on Tribute page
0.0 0

#1

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


#2

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


#3

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


#4

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.


#5

Right,

Off to have a think about margin and padding.

Thanks

Stewart


#6

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