Plain HTML and CSS solution

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  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

  1

  ---

  

  Fahim Mahmud•165

  @FahimMahmudJoyPosted over 3 years ago

  @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?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @FahimMahmudJoy here is how I did it in my solution

  0