3 column card using Flexbox

Community feedback

• 

  Parvathy Vazhoor•880

  @parvathyvdPosted over 2 years ago

  Hi,

  Instead of giving height and width to the individual boxes give width to the parent.

  cards { display: flex; justify-content: center; align-items: center; max-width: 50rem; margin: 0 auto; /* min-height: 100vh; //remove this } also remove width and heights from the boxes .box-1 ,2, 3{ /* height: 450px; / / width: 250px; }

  That will fix your problem. Always try to use width instead of height. Let the padding, margins define their height. Hope this helps.

  Thanks

  Marked as helpful

  1

  ---

  

  Marina•70

  @hellomarinaPosted over 2 years ago

  @parvathyvd Thank you for your feedback! I don't know what's wrong, I tried exactly what you told me but it looks really bad, the boxes lost their size and they went up to the top of the page so I don't know what I did wrong...

  0

  

  MioMauro•400

  @MioMauroPosted over 2 years ago

  @hellomarina In the third box (luxury) you have a one more text line. Try to set the lines all the same in all boxes

  0

  

  Marina•70

  @hellomarinaPosted over 2 years ago

  @MioMauro Yes! I notice that. I tried to fix by increasing the size of the boxes and changing the margins of the buttons.

  0
• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Marina,

  My suggestions:

  • To align the buttons of the last box, give all of the buttons margin-top: auto and give the parent of all buttons(box-1, box-2, box-3) display: flex:

  button{
      background-color: #f2f2f2;
      padding: 10px 25px;
      /* margin: 40px 0px;           /* <---- Remove */
      margin-top: auto;    /* <--- Add */
      border: solid #f2f2f2;
      border-radius: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
  }
  
  .box-1,
  .box-2,
  .box-3 {    /* <--- Add */
   display: flex;
   flex-direction: column;
  }
  img, button {    /* <--- Add */
   width: fit-content;
  }
  

  • Give the Cards Container width and height instead of giving it to each box...

  Also I suggest you instead of adding border-radius for each box, Add border-radius: 15px; and overflow:hidden; to Cards Container:

  #cards {
    display: flex;
    /* justify-content: center;      <--- Remove */
    /* align-items: center;      <--- Remove */
    /* min-height: 100vh;      <--- Remove */
    max-width: calc(300px * 3);    /* <--- Add */
    min-height: 500px;    /* <--- Add */
    border-radius: 10px;    /* <--- Add */
    overflow: hidden;    /* <--- Add */
  }
  
  .box-1 {
    background-color: #e38826;
    /* height: 500px;      <--- Remove */
    /* width: 300px;      <--- Remove */
    padding: 50px;
    /* border-top-left-radius: 10px;      <--- Remove */
    /* border-bottom-left-radius: 10px;      <--- Remove */
  }
  
  .box-2 {
    background-color: #006970;
    /* height: 500px;      <--- Remove */
    /* width: 300px;      <--- Remove */
    padding: 50px;
  }
  
  .box-3 {
    background-color: #004241;
    /* height: 500px;      <--- Remove */
    /* width: 300px;      <--- Remove */
    padding: 50px;
    /* border-top-right-radius: 10px;      <--- Remove */
    /* border-bottom-right-radius: 10px;      <--- Remove */
  }
  @media (max-width: 700px) {
    #cards {
      /* display: flex;      <--- Remove */
      /* flex-direction:column;      <--- Remove */
      /* flex-wrap: wrap;      <--- Remove */
      /* margin: 100px;      <--- Remove */
      max-width: 300px;    /* <--- Add */
      flex-direction: column;    /* <--- Add */
    }
  
    #cards > * {   /* <--- Add min-height for each box */
          min-height: 442px;
    }
  
    .box-1 {   /* <--- Remove all properties here and this class */
      /* height: 400px; */
      /* width: 300px; */
      /* border-top-left-radius: 10px; */
      /* border-top-right-radius: 10px; */
      /* border-bottom-left-radius: 0px; */
    }
  
    .box-2 {   /* <--- Remove all properties here and this class */
      /* height: 400px; */
      /* width: 300px; */
    }
  
    .box-3 {   /* <--- Remove all properties here and this class */
      /* height: 400px; */
      /* width: 300px; */
      /* border-bottom-left-radius: 10px; */
      /* border-bottom-right-radius: 10px; */
      /* border-top-right-radius: 0px; */
    }
  
    button {   /* <--- Remove all properties here and this class */
      /* margin: 0; */
    }
  }
  
  

  I think your code is now shorter...

  Don't repeat yourself (DRY)... This is a principle of software development.

  • After that, you need to center the component again by giving the parent element <main> containing the component(cards) the following properties:

  main {    /* <--- Add */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }  
  @media (max-width: 700px) {
      main { 
            padding: 24px;
      }
      //...
  }
  

  • When hovering over any button, its background should be transparent and the text color should be white as recommended in this challenge:

  button {
    //...
    border: 2px solid transparent;    /* <--- Add */
    cursor: pointer;    /* <--- Add */
    transition: background-color 0.3s, color 0.3s;    /* <--- Add */
    
  }
  button:hover {
    background-color: transparent;    /* <--- Add */
    color: white !important;    /* <--- Add */
    border-color: white;    /* <--- Add */
  }
  button:active {
  /* This effect works when you click the button  */
    transform: scale(1.05):     /* <--- Add */
  }
  

  Hope this help!... Keep coding👍

  Marked as helpful

  0