responsive blog-preview-card

Community feedback

• 

  Natali Grimm•890

  @Grimm-NPosted 5 days ago

  First off, great job! 🎉 Your attention to detail really shows, and your layout is coming along nicely. Keep up the good work! 👏

  A few tips to polish things even further:

  1. Use Relative Units Instead of px: To make your design more responsive, try using units like em, rem, %, vw, or vh instead of pixels. Relative units allow your layout to adapt more flexibly to different screen sizes and user settings, making the experience smoother on various devices. 📱➡️💻

  2. Use Flexbox for Alignment in Containers: When centering content within a container (like the body), flexbox is often a better choice than setting large margin values. Flexbox gives you more control, especially for aligning elements both horizontally and vertically. Here’s an example of how to center content in the body:

     body {
         display: flex;
         align-items: center;  /* Centers vertically */
         justify-content: center;  /* Centers horizontally */
         min-height: 100vh;  /* Ensures full viewport height */
     }
     

     This setup keeps everything centered beautifully with less code and better responsiveness.

  3. Set Card Width to 90% or 90vw for Small Screens: Noticed on smaller screens that the card sometimes sticks to the edges or even overflows the viewport. Setting the card width to something like 90% or 90vw will prevent this, as the card will shrink to fit within the screen’s width. This approach gives your content breathing room on smaller devices and helps avoid overflow issues. 😊

  4. Use a CSS Reset: Styling resets like A (more) Modern CSS Reset by Andy Bell are life-savers. 🧹 They clear out default browser styling so you start with a clean slate, ensuring a consistent look across all browsers. Without a reset, different browsers might interpret default styles differently, leading to unexpected (and sometimes frustrating!) layout shifts. Let’s keep it neat and predictable! 👍

  These tweaks will give your layout even more polish and make it shine on any screen size. Great job, and keep up the fantastic work! 🎨✨

  Marked as helpful

  2

  ---

  

  Adamul-asfa•40

  @Adamul-asfaPosted 3 days ago

  @Grimm-N thanks and i shall correct my mistakes

  1

  

  Natali Grimm•890

  @Grimm-NPosted 3 days ago

  @Adamul-asfa It’s all good; that’s the beauty of this platform! We learn from each other’s code and share tips—that way, we learn faster.

  0