3 column card using Flexbox

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

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👍