Vanilla CSS | My solution

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾 Hello Chris, congratulations for your solution!

  I saw that you've done a good work in this challenge, you paid attention to the details, the card component is responsive, the element design match. Well done!

  Your solution is almost perfect, I've only two tips for you:

  1.👾This challenge has two background images, mobile and desktop version background images.You can add a media query to switch between background-images when the screen gets the mobile size. I wrote the code for the media query in your solution, the image will change after the window reach width 500px. See the code below:

  @media (max-width: 500px) {.home-wrapper { background-image: url(./images/pattern-background-mobile.svg);}}

  2.👾Note that your section called .card-summary-plan is having a strange behavior when the screens get stretched and get smaller, the content start to pop up out the container, fix this using flex-wrap: wrap; to get the element in different rows when the card component contract or use a media query changing the flex-direction to have the element in rows to save space:

  .card-summary-plan { flex-wrap: wrap; }

  @media (max-width: 500px) {.card-summary-plan { flex-direction: column;;}}

  Hope it helps you and happy coding!

  12

  Marked as helpful