single-price-grid-component-master

Community feedback

• 

  STEPHEN Obayuwana•340

  @xaintobasPosted 4 months ago

  Hi @Umar094,

  Nice work on your design! I noticed a couple of opportunities to enhance it:

  Spacing Below the Container: There is a lot of space below your container div. Instead of using:

  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      background-color: hsl(0, 0%, 100%);
      box-shadow: 0 0 20px -10px;
      border-radius: 10px;
      width: 45%;
      height: 60%;
  }
  

  Consider using:

  .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
      background-color: hsl(0, 0%, 100%);
      box-shadow: 0 0 20px -10px;
      border-radius: 10px;
      max-width: 650px;
  }
  

  The auto in grid-template-rows: repeat(2, auto); allows rows to adjust based on content, and max-width: 650px; provides a more responsive design. The width and height you specified are not necessary.

  Formatting "Why Us" Content: For better readability, you can break your "Why Us" content into separate lines using the <br> tag.

  Instead of:

  <div class="box box-3">
      <h2>Why Us</h2>
      <p>
          Tutorials by industry experts
          Peer & expert code review
          Coding exercises
          Access to our GitHub repos
          Community forum
          Flashcard decks
          New videos every week
      </p>
  </div>
  

  Consider using

  <div class="box box-3">
      <h2>Why Us</h2>
      <p>
          Tutorials by industry experts<br>
          Peer & expert code review<br>
          Coding exercises<br>
          Access to our GitHub repos<br>
          Community forum<br>
          Flashcard decks<br>
          New videos every week
      </p>
  </div>
  

  These adjustments will improve your design. Let me know if you have any questions or need further assistance!

  Hope to be helpful.

  Marked as helpful

  1

  ---

  

  Umar094•280

  @Umar094Posted 4 months ago

  Its very useful, thanks!@xaintobas

  0

  

  Umar094•280

  @Umar094Posted 4 months ago

  Wouldn't it be better to use rem, insted of px? If user in browser change the font size, then box need to be expanding, but if i fix the box width with px, then it will not expend with the content size@xaintobas

  0
• 

  STEPHEN Obayuwana•340

  @xaintobasPosted 4 months ago

  @Umar094 here’s how you can incorporate rem units into your CSS:

  .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
      background-color: hsl(0, 0%, 100%);
      box-shadow: 0 0 20px -10px;
      border-radius: .6rem;
      max-width: 45rem;
  } 
  

  You can as well adjust the values.

  Feel free to let me know if you have any questions or need further assistance!

  Hope to be helpful.

  Marked as helpful

  0
• 

  STEPHEN Obayuwana•340

  @xaintobasPosted 4 months ago

  @Umar094 yeah, using rem units is better for ensuring scalability, as it allows the design to adapt to the user's browser settings and font size preferences.

  0