using css flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .cards on the page using flexbox, replace the height in the main with min-height: 100vh.

  For a responsive content .give .cards a fixed max-width value and there is no need to give it a height and min-height value. Give .card a padding value for all the sides.

  in the media query reduce the max-width value.

  Give the body a background-color

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Enis67•140

  @Enis67Posted over 1 year ago

  @Hassiai

  but when I remove height: 500px its going to be, maybe its because I have position: absolute for the button?

  what value should I give for max-width? and what value in media query?

  0
• 

  GeorgeBryzh•80

  @GeorgeBryzhPosted over 1 year ago

  I'd like to share you that remarks

  ---

  • You must delete height: 500px for desktop, the card should change a height

  ---

  • You don't need to set a position: absolute for you button

  ---

  • You must set on the.btn-click text-align: center, to center a text inside a button

  ---

  • You must to set a border-width on the px to make that rounded

  ---

  Happy strides on that road)

  0

  ---

  

  Enis67•140

  @Enis67Posted over 1 year ago

  @GeorgeBryzh

  .btn-click{ color: hsl(179, 100%, 13%); background-color: #fff; text-decoration: none; padding: 8px 32px; border-radius: 135px; text-align: center;

  }

  how can i get the button on the position like I had with absolute? Its right under my paragraph.

  0
• 

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may interest you.

  Your solution looks great for the desktop screen, I would recommend a few changes in CSS for your button so that it will look perfectly round and also consider repositioning the button.

  See below the CSS code for the desktop screen...

  
  .btn-click {
      border-radius: 135px;
      top: 75% /* Or maybe 80%  */
  }
  

  For the mobile screen, I would recommend a few changes in the media query see the below code.

  CSS
  
  @media (max-width: 480px)
  {
  
  main{
  
  /* height: 100vh; */ 
  
  }
  
  
  .card {
      /* width: 100%; */
      /* height: 100%; */
      padding: 5rem;
  }
  
  .btn-click {
      left: 38%;
      top: 94%;
  }
  
  }
  

  I hope you find my comment useful, 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding

  0