Refat

Latest comments

• 

  Jessica•70

  @JesNetWD

  Submitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  I made my layout responsive across various screen sizes.

  What challenges did you encounter, and how did you overcome them?

  At first even though I made all my columns side by side, they were of unequal length. Using CSS grid instead of float helped with that. I also edited my solution to make it more responsive across various screen sizes.

  What specific areas of your project would you like help with?

  No major problems but please let me know if the different layouts are visually appealing.

  

  Responsive 3-column preview card component using CSS grid and flexbox

  2

  30
  

  Refat•10

  @Refat-web-dev

  Posted 2 months ago

  The solution demonstrates a decent structure and some use of semantic HTML, but the responsive design is seriously lacking and performs poorly across screen sizes. On mobile devices, the layout collapses into a block format, but the spacing feels cramped, margins are inconsistent, and some elements appear misaligned or too tightly packed. The media queries are overly rigid and rely on fixed breakpoints instead of using more fluid, flexible techniques like auto-fit and minmax() with CSS Grid. This results in a layout that looks broken or awkward on anything between 420px and 882px — which is a huge range of common screen sizes. While the general structure and styling are clean, the adaptivity is not user-friendly and needs major work to be considered responsive by modern standards. Accessibility also needs improvement, particularly in the use of empty alt attributes and the misuse of <a> tags styled as buttons. Overall, the code has potential but lacks polish where it matters most: in making sure it works well across devices.

  0