Three Column div in another container div - display:flex, float:left;

Community feedback

• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hello Vedat Sözen ! Congo 👏 on completing this challenge

  Let's look at some of your issues, shall we:

  • Check my article on accessibility issues

  • To center the card vertically

  min-height: 100vh;
  display: flex;
  justify-content: center
  align-item: center;
  

  or use this 👇

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
   }
  

  • Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with alt. happy Coding😀

  01

  Marked as helpful
• 

  Aadvik•1,250

  @Aadv1k

  Posted over 3 years ago

  So first up, you need to center your container which you can do like so

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
   }
  

  Then, you need to apply a display of flex on the parent container. Don't set the height of any element let it be based on the padding. then, simply add a media query to set the flex-direction to column on mobile.

  00

  Marked as helpful
• 

  Vedat Sözen•230

  @vedatsozen

  Posted over 3 years ago

  my container div is centered with margin:auto; I made margin-top: ..... display:flex is even in code

  ı just need media query tutorial how to make it.

  00