Single Price Grid Component

Community feedback

• 

  Muhammad Waleed Ahmed•270

  @WDWaleedPosted about 1 year ago

  Hi there!

  I see that you're most concerned about the positioning of elements. Well here are some tips that I believe will be handy: You can center the entire card like this:

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  One huge mistake that you've made is by not setting every element's box sizing to border-box. You should do this:

  *, *::before, *::after {
      box-sizing: border-box;
  }
  
  /* The * is used to select every element */
  

  You also said that you couldn't position the elements properly. There is a very simple solution to your problem. Instead of using positioning, you should use padding and margins. for your .benefits-section and your button, instead of positioning, use margins and padding. Something like this:

  .benefits-section {
     margin: 1rem auto;
     /* Maybe some padding here if needed */
  }
  
  button {
     max-width: 250px; 
     margin: 1rem auto; 
     /* Specifying an explicit width and then setting the left and right margins
          to auto allows you to automatically center an element. The 1rem is for 
          top and bottom margins.*/
  }
  

  You can tweak the above values as you prefer.

  All in all, I think all your problems with positioning the elements can be solved using margins and padding. You don't need to use positioning because it makes the code complicated and difficult to understand. I hope I could help and If you have any other questions, don't hesitate to ask.

  Marked as helpful

  1

  ---

  

  P

  Kyle Deguzman•110

  @CSE-KylePosted about 1 year ago

  @WDWaleed appreciate the help and feedback!

  0