Profile card component challenge hub

Community feedback

• 

  Thomas•370

  @TsiolisPosted about 3 years ago

  Hi Pawel

  Great job on completing the challenge.

  I noticed when resizing the page, the card becomes quite narrow at around 900px down to 600px. This is because your media query sets the max-width to be 25% when the viewport is more than 600px wide.

  A good way around this would be to set the card width to 90% as you have, then set the max-width to the largest px value width you would like the card to be. This means the card would be the correct size on larger screens, but will also resize correctly for smaller screens.

  Here is the code I would suggest:

  Add a max-width to .card .card { height: 55%; width: 90%; max-width: 360px; background-color: #fff; border-radius: 15px; border-color: transparent; overflow: hidden; }

  Remove .card styling in the media query @media screen and (min-width: 600px) { body { background-position: -300px -600px, 650px 275px; } }

  I hope this helps, If you have any questions just ask.

  Happy coding!

  Thomas

  Marked as helpful

  0