Responsive three columns cards

Community feedback

• 

  Michael Bishop•1,080

  @MikeBish13Posted over 3 years ago

  I think your issue here stems from coding the challenge out desktop first, which makes things a little more difficult as the screen size reduces. Coding your projects mobile first is a good habit to get into.

  In terms of the issue itself, I think the flex-wrap is causing the problem alongside a lack of flex-direction. I would remove the flex-wrap and set the flex-direction to 'column' on your (max-width:800px) media query - this should remove the need for setting widths on each of your sections.

  0

  ---

  

  Daniel•280

  @ddaniel27Posted over 3 years ago

  @MikeBish13 Thanks! I've read about that but I didn't think was so useful. I'll keep it in mind :)

  0
• 

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  Great 👌 work ☺️ @Daniel

  I am on mobile so I can't inspect your project but I am giving some suggestions 😊

  • when the button is hovered then you are giving it a border which is moving elements around it which is not good for UX, so you may do this

  .btn {
      border : 2px solid blue;
  };
  .btn : hover {
      border-color : #ffffff;
  }
  

  This way you are already giving it a border of same color as background but when hovered, the color of border gets white or as per the design and not actually creating a border

  • Use Irfan view to measure the layout from the design image they provide

  Hope it helps and happy coding 😉

  0

  ---

  

  Daniel•280

  @ddaniel27Posted over 3 years ago

  @RocTanweer Big thanks for reply! I had not thought of that, it's a cool trick hahaha, thanks again.

  1

  

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  @ddaniel27 my pleasure 😊

  0