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