Hello everyone, here’s my attempt on the tribute page project https://codepen.io/harrison01/pen/MWaVLmG, feedbacks will be highly appreciated please feel free to.
welcome @harrison,
great work on your tribute page.
looks great on smaller screen, but i think its a little bit odd on larger screen, your image goes at top left screen away from the tittle.
tbh, im not grid expert, maybe it has related with your grid layout.
Couple things. Firstly, always good to run your HTML through a validation such as https://validator.w3.org/ as there are quite a few errors you’ll want to fix with your code.
-
One that took me a minute to figure out is that apparently you shouldn’t put anything between
<p>tags except text or text editing tags such as<br>or<strong>. Your<div>and<img>ones are what’s causing your closing</p>to show red with errors. -
Your layout2 section is not responsive. It stays the same width and gets pushed off screen to the right.
-
The Company section is not centered, it is off to the right.
-
There is way too much margin or padding between the items in your layout2 section. Especially on smaller screens, it’s like a full page away from the header image.
-
You might want to rethink they layout for it a bit. On larger screen maybe instead of having the image to the right, have it stay above and order the layout2 section horizontally below it. Or at least vertically center the image so it isn’t just sitting in the top left corner and stays centered to the layout2 section.
-
In your CSS #tribute-info section, the
line-spacingshould beline-height
That’s all I’ve got for now. Keep it up!
1 Like
thanks so much @ sobadrdb I will make some adjustment so as to fit bigger screen
thanks so much for those vital point will make an adjustment soon
Don’t use <br> to force line breaks or add spacing. Use margin and/or padding in CSS.