Tribute- feedback

Beyonce tribute
This is my first version of the tribute page, Interested in any feedback or suggestions on improvement. thank you :slight_smile:

Nice job! I have a few suggestions. First, I noticed that the img is not centered, which is required to pass the FCC tests. Second, the header “Tribute to the Queen: Beyonce” does not play nice with small screens (because the letters overflow the white boarder of the img container due to the absolute positioning 20px to the left of right edge) and that with larger screens it goes outside of the image entirely. The reason why I mention this is because it seems to me that you intended to have heading be within the bounds of the img. Finally, as a style note you might want to consider making the paragraph with the info about Beyone left aligned instead of center aligned since center alignment can result in weird spacing.

thank you so much for the feedback. I thought the image was centered , it even passed the FCC test. Am i missing something ?

also would you know what would be a better way to keep the header within the image even when the size changes ?

The image has an odd functionality with the tests that I haven’t seen before. Once you expand the window past around 1366px the test fails. However, below that size it passes. I imagine the reason why it appears centered is below 1366 or so the image takes up the entire page and resizes responsively when scaled down to lower width so it appears centered to the test below 1366px. However, I’m still relatively new to all this, so someone more experienced might have a better explanation that I do as to why its happening.

Second, keeping the header within the image is a bit more complicated. To do so you need to take a number of steps, (1) you need to move the header element inside the img-div, (2) then you need to set the img-div's position to position: relative; because this will allow the absolutely positioned header you’ve already done to anchor to its nearest positioned ancestor (meaning that the nearest thing to it that does not have the default positioning of position: static;), which will be the img-div once it set to position: relative;. However, that is not quite enough to get us there because the text will still break past the image when the canvas is expanded past 1340px, and will break past the left border when on small mobile sizes. To prevent it breaking past the left-border is relatively simple, (3) add padding-left: 20px; to the #title. On the other hand, the prevent it breaking past the right border once the canvas is expanded is a bit more complicated. The reason why it will break past the img-div is because by default the #img-div will expand to take up 100% of the page, which means that it will take the absolutely positioned header with it. So once, the page width is greater than the img width (which caps at 1340px by default based on how it was uploaded to where you’ve linked it from) then it start creeping past the img’s right border. To fix this, (4) set a max-width: 1340px to the #img-div. After that everything should work!

Edit: Doing the 4 steps in the paragraph above will also fix the centering issue.

1 Like

good effort for the first project, still a long way to go in terms of visual design. I’d suggest to add more info and put more effort in the CSS. Can I ask how did u use the FCC test suite.

on the project page it gives you a link and says you can fork that pen and then it starts your own pen with the testing.