Flexbox

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  If you want that this solution is responsive, I suggest some techniques without using media query for this solution. Also, I recommend avoiding repetition in your code and not using styles that don't work.

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

  body {
    /* overflow: hidden; */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox in the .main-con to center the card
  • If you use max-width, the card will be responsive

  .main-con {
    background-color: hsl(0, 0%, 100%);
    /* height: 45%; */
    /* width: 15.7%; */
    max-width: 300px;
    padding: 15px;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    border-radius: 1rem;
  }
  

  • If you give height to text, it prevents the card will be responsive
  • You can update font-size and padding in this way
  • You can give margin-bottom to the .main-con .para to give a gap between the text and the bottom of the card

  .main-con .main-text {
    /* height: 17.5%; */
    /* font-size: 17px; */
    font-size: 20px;
    /* padding: 0 0px; */
    padding: 0 10px;
  }
  

  .main-con .para {
    /* height: 17.5%; */
    /* width: 100%; */
    /* font-size: 13px; */
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0 10px;
  }
  

  • Finally, if you follow the steps above, the solution will be responsive
  • You'd better remove media queries and the styles below to avoid repetition

  /* .container {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
  } */
  
  /* .main-con .img {
    height: 65%;
    width: 100%;
    border-radius: 1rem;
  } */
  
  /* .main-con .para p {
      font-size: 13px;
  } */
  

  Hope I am helpful. :)

  0
• 

  EmmanuelUrias•130

  @EmmanuelUriasPosted over 1 year ago

  Great job looks great the only thing I have to add is that adding padding to the bottom of it would make it perfect.

  0
• 

  Dinesh Kumar T•100

  @dineshjrPosted over 1 year ago

  Hi Lance everything is perfect on this design while the view is not perfect in desktop the component looks so small and on mobile view the image looks so not good so kindly fix this issues and repost it here again.

  Thanks & Regards

  Dinesh

  0