Single price grid component

Community feedback

• 

  Atif Iqbal•3,200

  @atif-devPosted about 1 year ago

  Hi, congrats🎉 on completing the challenge. Better take care about following points.

  For better look and centered, modify code as:

    @media screen and (min-width: 1020px)
  article {
    grid-template-areas:
    "header header" 
    "price  footer";
    display: grid;
    place-content: center;
    width: 70%;
    margin: 0 auto;
  }
  

  article {
    width: 70%;
    margin: 0em auto;
    margin-top: 7em;
  }
  

  Hope you will find this Feedback Helpful.

  Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn

  Marked as helpful

  1

  ---

  

  myrh•100

  @myrhisyoinkedPosted about 1 year ago

  @atif-dev thank you! I found out that just adding

    width: 70%;
    margin: 0 auto;
    margin-top: 7em;
  

  on article element works good

  0
• 

  Carlos Villarta•260

  @caloyvPosted about 1 year ago

  Hi, regarding to your question, flexbox can do most of the job. Look up on how flex-direction, justify-content and align-items works and with that, you can easily adjust the elements horizontally and vertically. And you can also use all the flexbox properties even when it behaves like a display: block. There are other ways to do it but i find it easy using flexbox especially when i want a specific element to become horizontal from a vertical state or vice versa when changing the screen size.

  My technique on making the footer stay at the bottom is calculating the amount of height of header, main and footer in percentage and they must equal to 100%. here is an example:

  header{
      height: 10%;
  }
  
  main {
      height: 80%;
  }
  
  footer {
      height: 10%;
  }
  

  If you don't have a header or footer, just make the the main{height: 90%}, or whatever you prefer. Just make sure that when you add it all up, it equals to 100%.

  This website can also be handy while coding.

  1