Hey check out my first tribute page
Open to critics and advice
Thanks :relaxed:

I would suggest that if you are going to float the image that you use a CSS media query break point to remove the float so that the image sits above the content at some point, because as I narrow my browser the content to the left of the image starts to get too narrow.

Personally, I would remove the float so that the image is above the content by default. Then narrow your browser in as far as it will go and then gradually start to widen it. Once you feel you have enough horizontal space to have the image floated to the right with enough space for the content then you can add a break point there (using min-width and preferably em units) to add the float.

Another issue is that the contrast between the text color and background color is not big enough to be accessible. Use the WebAIM color contrast checker to make sure your contrast levels are big enough.

For the alt text on the image, you don’t want to include the word “image” since it is already implied because this is alt text for an image. The alt text should describe what is showing in the image. If you were going to describe the image to a blind person, what would you say? That’s the sort of thing you would put in the alt text. Just saying “Mo-Ali” isn’t really very helpful because we already know this is an image of him. Rather, describe what he is doing in the image. Also, the alt text should not be the same as the caption text. If it is then you can leave the alt text blank (alt="") and just use the figcaption. But I think there is enough detail in this image to describe that it will be different from the caption text.

1 Like

About the image float didn’t quite get you on the point of narrowing my browser in. May need to go and read more about floating.
Point taken about the alt!
Thanks for the response.

As you narrow your browser doesn’t the content on the left side get too skinny (like one or two words per line)? Also, the first sentence splits and most of it is shown on the left hand side of the image but then there is a huge break of white space and then it continues on below the image. You should prevent this from happening by using break points to only float the image when there is enough horizontal space for both the image and the content.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.