3-columns preview card component

Community feedback

• 

  Djamel1133•880

  @Djamel1133Posted 5 days ago

  Hi,

  Great job! Your spacing, aligning, and responsiveness are almost perfect. Just a few small things:

  • Your breakpoint (max-width: 768px) should be, in my opinion, a little larger. When downsizing, a horizontal scroll bar appears at certain sizes. You should define your breakpoint at that size.

  • I know that 768px is a common breakpoint (Mobile: 320px — 480px, Tablets and small screens: 481px — 768px, Laptops and small desktops: 769px — 1024px, etc.), but instead of targeting specific device screen sizes, it's more effective to create breakpoints based on the needs of your design. This involves testing your design by adjusting the browser width and adding breakpoints where the design looks awkward or breaks. This approach ensures that your design is optimal for all devices, rather than just a few specific ones.

  • Using flexible layouts (in percentage, etc.) and relative units (rem, em, etc.) for font sizes and elements can ensure better adaptability across different screen sizes.

  Note: Don't look at my solution (it is very bad because I did it early before some friends advised me on this topic).

  One more thing: for your HTML tag elements, you jumped directly to <h2>. It's crucial (though not forbidden) to have <h1>, <h2>, and so on in sequence. Check your site with an HTML validator to ensure everything is correct.

  Keep up the excellent work and happy coding!

  Marked as helpful

  0