Hi
I’m afraid this does not fit on my mobile screen, it’s spilling off to the sides
The html isn’t bad but you are causing yourself all sorts of problems with the way you are approaching responsiveness. I can’t stress this enough - Do not change root html font size like this. All this does is introduce accessibility failures and create really hard to maintain code. There is no reason 1rem needs to equate to 10px and no reason it would need to equate to anything else either. Just don’t do it.
To make this responsive (the mobile version should be the base style of following best practices) the only things that need to change in a media query are
- max width on the component
- flex direction
- height on image
As this is a meaningful image it makes much better semantic sense to have it in the html in a picture element. The browser will then choose the correct image to serve for mobile and desktop.
And there is no need for duplicate font link declarations in the head or multiple css files.
Keep it simple
Marked as helpful
@Akinyemi4
Posted
@grace-snow thank you very much.I’ll take note of that in subsequent challenges.Thank you for the nice and beneficial feedback.
@Akinyemi4 definitely take the time to refractor this one before moving on
