Single Price Grid Component: CSS-Grid Design

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site looks great! To answer your question: The reason your box gets cut off from the top in mobile layouts maybe due to the fact that the component is taller in mobile layout, combined with the fact that you positioned your component using position: absolute.

  Here is what you should change with regards to your code:

  • make your body: width: 100vw and height: 100vh
  • center your content using either flexbox or gridbox. In my opinion, this is better than using position: absolute to center the box. position: absolute is very useful, but I feel that it should only be used on smaller pieces of your website not the main content
  • to center with flexbox you can do something like this:

  body{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  • last thing, is that you you should use an unorder list for the "Why Us" box to list out the items instead of using line breaks. This can be done using something like this:

  <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
  </ul>
  

  Hope you find this feedback useful 👍

  Marked as helpful

  1

  ---

  

  Yonten•340

  @yozidstPosted 12 months ago

  @Zy8712 Thank you! This is very helpful.

  0