responsive-blog-card-page

Community feedback

• 

  Aakash Verma•9,500

  @skyv26Posted 2 months ago

  Hi @teeogcode,

  First of all, your work looks fantastic! 🙌 You're definitely on the right track. A few small suggestions:

  1. Use max-width instead of width: Instead of setting a fixed width, consider using max-width for a more responsive design. This way, your elements can scale down if necessary, but won’t exceed a certain size. The beauty of max-width is that it allows the element to adapt to different screen sizes, making it more flexible without needing the media query. 🎯

     With max-width, you won’t need to use the media query at all. This simplifies your code and makes it cleaner and more efficient. 💻

     Here's how your updated code would look:

     #main {
         max-width: 23em;
         margin: auto;
         background: hsl(0, 0%, 100%);
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 2px solid hsl(0, 0%, 7%);
         border-radius: 5%;
         box-shadow: 7px 7px 0 hsl(0, 0%, 7%);
         transition: box-shadow 0.5s ease-in-out;
     }
     

     This way, you’ll have a more flexible design without worrying about breaking it on smaller screens. 🌱

  2. Don’t overthink it!: You’re definitely on the right track by using classes! 💡 It's actually a great practice. If you were thinking about skipping classes or using IDs or tags directly, remember that frameworks like Bootstrap and Tailwind don’t rely on IDs or specific tag styles — they use utility classes to create modular and reusable components. This approach is widely recommended because it helps keep your code maintainable and scalable. 🚀

     So, you're doing great with the classes! Keep it up, and don’t hesitate to experiment with more modern practices like this. ✨

  Keep up the awesome work! You're doing an excellent job, and I can't wait to see how your project evolves. 👏

  Marked as helpful

  0