Hi
I think this needs a little more work to be honest. I recommend you open devtools, maybe on the side of your browser, resize and inspect elements to see what happens. You can definitely remove some of the divs and I think you need to rethink the table layout being fixed.
Other suggestions:
- As you've gone desktop-first with this, your media query needs to go up to the size where there is space for the desktop layout to start. 375px is way too early. Your desktop layout can't fit on the screen at 376px for example, it needs to go up to something like 700px (at a guess)
- Add mix-blend-mode multiply to the image
- Try to get the font sizes, font-families, font weights, padding and max-width much closer to the design
- If including alt text, it absolutely cannot say stuff like
IMG
it needs to be a proper readable description - how would you describe it to someone if the image didn't load - I'd recommend flex instead of table layout for those stats, but it's up to you. Whatever you choose to do though, text must never be in a div or span alone, always a meaningful element
- consider adding a basic reset to the start of your stylesheet. You are relying a lot on default browser styles at the moment (e.g. margin on the body - It's usual to strip that out and add padding either there or a layer down in the dom to prevent content hitting the sides of the screen)
I hope this helps, good luck
0
Amith Jolly• 40
@amithjolly
Posted
Thank You so much, Grace. It would definitely help me a lot in getting better.
0