Single price grid component

Community feedback

• 

  Shane Chaffe•900

  @ChaffexdPosted over 1 year ago

  Hey Momin,

  To answer your question about using grid in flex or vice-versa, yes you absolutely can. They work extremely well with each other actually!

  I strongly recommend you taking a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes so you can help bring your projects to life.

  Good job!

  Marked as helpful

  1

  ---

  

  Momin Riyadh•370

  @momin-riyadhPosted over 1 year ago

  By replying to your comments and rechecking my code I fix and learn a lot! Here is an updated code for my card section

  .card {
      display: grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:minmax(216px, 100%) minmax(259px, 100%);
      min-height: 475px;
      max-width: 635px;
  }
  

  @Chaffexd

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  There is no need to style the main, to center .card on the page using grid, add min-height:100vh; display: grid place-items: center to the body

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

  Give .card a fixed max-width value , display: grid and grid-template-columns:1fr 1fr; in the mobile design change the value of the grid-template: column to 1fr; max-width: 600px.

  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

  ---

  

  Momin Riyadh•370

  @momin-riyadhPosted over 1 year ago

  Why should I place style for the body from the main tag, in the body tag may be all components will not in vertically centered @Hassiai

  0
• 

  Guillermo•250

  @Guille-SanchezPosted over 1 year ago

  Hi! To my knowledge you can totally use grid inside flexbox elements. Think of each element as a container, the flexbox -grid attributes only modify the disposition and size of the element. But still, each conserves the state of being a simple container.

  One recommendation I would give you is to use Mozilla as your browser when debugging flex-grid items. Mozilla devtools is better optimize for dealing with them, look into it, best luck!

  Marked as helpful

  0

  ---

  

  Momin Riyadh•370

  @momin-riyadhPosted over 1 year ago

  Yeah, I agree! Once upon a time, I'm only the men who used Mozilla, its almost 5 years I'm using chrome for debugging@Guille-Sanchez

  0