blog preview card!

Community feedback

• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Hello @Ilyes0izmr! 🎉 Congratulations on completing the challenge! 🚀

  I'm thrilled to see that you've met the main requirements. However, there's a small detail I'd like to address.

  In your code, you're defining your ".container" with a "width: 100px". This means that, thanks to your media query "@media (min-width: 390px)", starting from a screen width of 390px, your ".container" class adapts correctly for PC viewing. So far, everything is excellent.

  The issue arises when the screen resolution is less than 390px. In this case, your ".container" class will retain the value of "width: 100px", which makes it look bad on devices with a width less than 390px.

  My recommendation is to either remove the "width" property or change it to a percentage, for example, "width: 97%".

  Keep up the great work and continue improving! Don't stop pursuing your goals! If this comment has been helpful to you, feel free to rate it! 🌟

  0
• 

  anass-lamiri•320

  @Anass-LamiriPosted 10 months ago

  Hi! First of all, you did a great job in your challenge, I only want to add some pointers to polish your solution:

  -in the mobile viewport if you inspect you will see that the card is broken because of the width(100px) you applied which makes your design broken in the mobile viewport, a solution I can provide is to remove the media query and specify the width to the container like this:

  .container {
      max-width: 390px;
  }
  

  I hope you find this feedback helpful, and feel free to reach out.

  0