Responsive 3 Column Challenge Solution using Flex box

Community feedback

• 

  Ahmet Kabacali•450

  @ahmetkabacaliPosted almost 2 years ago

  hi,

  if you interested i will give you few suggestion.

  if you want centered any object, to center 1 object, the inside must be smaller than the outside. If you say 100% to the object in it, it won't be an centering. Although there are several methods for centering, the simplest is to give the outer object an display:flex ​​value. if the object inside is smaller than the outside. You can center it horizontally with justify-content:center; and vertically with align-items:center.

  Maybe you knew, but when I saw that there was a problem in this project, I wanted to point it out.

  you can fix with theese cods:

  body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .container {
      width: fit-content;
  }
  
  .card {
      height: 93vh;  /* delete this */
      padding:3rem;
  }
  

  i hope i helped.🙂 Good coding.🙂

  Marked as helpful

  1

  ---

  

  Laxman Jonchhen•50

  @LaxmanJonchhen12Posted almost 2 years ago

  @ahmetkabacali sure will implement the changes

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  Give the body a background-color.

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

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give .container a fixed max-width width value for a responsive content. max-width: 600px. There is no need for align-items and justify-content in .container

  There is no need to give the .card a width value, give .card a padding value for all the sides.

  In the media query there is no need to give .card a height value and change the max-width value of .container.

  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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Laxman Jonchhen•50

  @LaxmanJonchhen12Posted almost 2 years ago

  @Hassiai Sure will implement the changes

  0