Responsive page using flex box

Community feedback

• 

  rluna15•60

  @rluna15Posted about 3 years ago

  There as a couple issues but other than that it looks great!

  1. The card is not center horizontally
  2. The color for the body of the card should be white. The color that you used for the plan section of the card should be the color that you used for the body

  0

  ---

  

  P.Vivek Yadav•170

  @VivekYadav105Posted about 3 years ago

  @rluna15 what are the issues? could you please brief them out? and I did align the card both horizontally and vertically

  0

  

  rluna15•60

  @rluna15Posted about 3 years ago

  @VivekYadav105 Yeah the card is not centered vertically is what I meant to say. Your card is showing up higher on the screen because the body tag is not taking up the entire screen. Go into your inspector and look at you body tag. To fix it change this:

  .body{
      height:675px;
      width:95%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('images/pattern-background-desktop.svg') no-repeat hsl(225, 100%, 94%);
      background-size:100vw;
  }
  

  to this

  .body{
      height:100vh;
      width:100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('images/pattern-background-desktop.svg') no-repeat hsl(225, 100%, 94%);
      background-size:100vw;
  }
  

  For the colors : The card class should have a bg of white and your plan class should have a bg of hsl(225, 100%, 98%)

  Also as I was looking through your code I noticed you did this a couple of times

  height:675px;
  width:95%;
  

  I don't know if that's good practice or not. I would try to keep the units that same like how you did in your media tag

  @media (max-width:376px){
      body{
          width: 350px;
          height: 650px;
  

  Hopefully this is much clearer because my first comment was trash

  Marked as helpful

  0