Single price grid component

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  Greetings MrNomis

  So far so good 🙌. Here are a few of my observation.

  • Elements such as header, main, footer have semantic meaning other than elements such as section, div, span. The main element is important in a site as it contains the main purpose of the site.
  • an h1 element should be the first heading of your site in most cases .
  • in .section-three , i would suggest the p element to an unordered list
  • using fixed widths and heights on your elements can cause your elements to behave strangely when the contents of the element cannot fit in the container. Let the contents decide on the height without restrictions.
  • to center the container , make .container to have a min-height: 100vh and justify-content: center as well
  • for font sizes . use rems

  Marked as helpful

  0

  ---

  

  MrNomis•40

  @MrNomisPosted over 2 years ago

  @ChamuMutezva that is actually really helpfull mate. thank you

  0
• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  Hi MrNomis I had time to look into your silution in particular about centering everything better at the center . Here are the changes are applied on the style.css file

  1. remove all of line 22

  2.Replace line 142-144 with this code

  .container { height: 100vh;

  }
  

  3. Remove this "position: fixed" line 127

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey MrNomis!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions 1.You should use <main class="container"> instead of <div class="container">. 2. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on. 3. You can use the margin property to center your card and maybe reduce the width a little bit eg: margin: 10rem auto;. Or you can set display to flex then set both align-items and justify-content to center. this will center a div both horizontally and vertically.

  Regardless you did amazing... hope you find this useful... Happy coding!!!

  0
• 

  Oluwafemi Olukoya•320

  @Oluwafemi21Posted over 2 years ago

  To center things there are several ways. But the best two I can recommend is using flex and grid. The code for using flex goes thus display:flex; align-items:center; and justify-content:center; this would be the styling of the body element, since you want to center all your items in the middle of the page. same goes for the grid property display:grid; place-items:center; and if you haven't learnt either flex or grid i implore you to learn it.

  0