Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

blog preview card!

@Ilyes0izmr

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


feel free to criticize the code :3

Community feedback

@HunigoleSan

Posted

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

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord