Hello
This card is a bit too big at all screen sizes. Even on mobile it overflows out of my screen.
Rather than setting width, maybe max-width would be better?
Try to see if you can get the shadow closer to the design as well.
And change the first ul to a heading and paragraph(s). The persons name and age, then location don’t make sense as a bullet point list.
You have loads of repetition in your css in a media query at the moment. Media queries should only override what they need to for that screen size.
That said, I don’t think this solution needs a media query at all. And it seems like you are targeting most screen sizes inside it. You’ve gone desktop first, but your media query starts at a screen size larger than my laptop screen. I’d just remove the whole thing.
Good luck
Marked as helpful
@FahimMahmudJoy
Posted
@grace-snow Care to have a look if you have time? I tried to make the card smaller, declared the name and place as heading and paragraph and removed the media queries as per your suggestion. However, the background image is still a problem as it keeps moving with changing screen size. Can I fix it in place with respect to the card?
@FahimMahmudJoy here is how I did it in my solution
