SOLUTION 3-column preview card component

Community feedback

• 

  Djamel1133•880

  @Djamel1133Posted 4 days ago

  Hi, great job, you are making enormous progress.

  However, there are always small adjustments to be made. One of the challenges in these tasks is to take responsiveness into account.

  For this, you can use breakpoints with media queries to adjust your design for different configurations. In your case, you can add this (assuming body is your main container):

  @media (max-width: 768px) {
    body {
      flex-direction: column;
      ...
    }
  }
  

  to arrange your cards vertically. You have to determine the perfect size, which in this example is 768px.

  Keep up the good work and happy coding!

  Marked as helpful

  0

  ---

  

  Marwa Asaad•260

  @marwaas3dPosted 2 days ago

  @Djamel1133 Hi, thank you for your feedback and support! 😊

  I checked the style-guide, and it specifies that the Mobile breakpoint should be 375px is that what you mean?? Let me know if there’s anything else !

  1
• 

  Djamel1133•880

  @Djamel1133Posted 1 day ago

  Hi again,

  What I mean is that when downsizing your solution, there isn't enough space for three cards. You can add media queries to address this issue and adapt your solution for various device sizes (desktop, tablet, mobile).

  There are excellent resources available online for this. Please check:

  • W3Schools on CSS Media Queries
  • Kevin Powell's video on Responsive Design with Media Queries

  Keep up the good work, and see you in the next challenge.

  0