Hi
I'm afraid this still needs quite a but of work.
Did you forget to import the fonts?
Some of the content is spilling out of the card on mobile for me. I'll add some Screenshots to slack so you can see what I mean.
It's also a bit odd how I am seeing the desktop version on mobile landscape with very small text. Have you changed the viewport meta in the document head? Or maybe it's just caused by the css I'm not sure...
Other issues I can see
- nested sections - it's OK to use divs for layout
- h2s need removing, they don't make sense as headings
- small element needs swapping for a span
- font sizes should be in rem not px
- layout needs building with flexbox, not large paddings / margins
- line height should be unit less like 1.5
- heights and widths arent needed on the card or its children, just a max-width on the card and min-height on the image. Maybe some flex-basis
- alt text if used needs to describe what's in the image
I hope these pointers help you and give you stuff to read up on. Good luck
@Darhniel
Posted
@grace-snow I can't seem to find a perfect way to place the card at the center of the page. Any tip to help me out?
@Darhniel make the body either a display grid or flex, then use accompanying properties to center
So with grid that would be place-content center
Or with flex it would be justify content and align items both set to center
Marked as helpful
