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.
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…
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.
Try to play with
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.
Off to have a think about margin and padding.
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.