3-Col-Card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="main-container"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

  There is no need to style the img in this challenge. the body has a wrong background-color.

  To center .main-container on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  USING FLEXBOX:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Give .main-container a fixed max-width value for a responsive content. max-width:400px which is 25rem/em and give .sedan, .luxury, .suv the same padding value for all the sides. In the media query increase the max-width of .container max-width: 600px.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  "I found difficulty with controlling the size of the flex items and having them in the centre."

  You can make the body size equal to full screen height, (viewportheight or vh) and then you have enough space to center it by using CSS Grid or Flexbox like this. One e.g.:

  body { font-family: 'Lexend Deca', sans-serif; background-color: #ffff; min-height: 100vh; display: grid; place-items: center; }

  Then add a max-width to the container e.g. max-width: 900px etc.

  Also adjust paddings of the individual sections to match design even more.

  Hope you find this feedback helpful!!

  1