Customer feedback using css grid

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great Work Out There . I noticed that the Testimonials grid is not aligned center because it is missing a CSS property, which I recommend adding to the body properties (min-heigh:100vh). This property will help align the Testimonials grid properly. I hope this suggestion works and helps. Happy coding!

  Marked as helpful

  2

  ---

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @AkoToSiJeromeEh thank you very much.it has been adjusted

  0
• 

  Mahdi Ali•180

  @mahdicodes1Posted over 1 year ago

  Hi @Ferabel 👋

  Here are my recommendations, specifically about getting the exact size of the sample image you asked for. Hopefully, you find them useful!

  • My strategy to get the exact size is: Start designing from larger elements to smaller ones. As mentioned by friends in the previous comments, using grid and flex is a simpler option. Then, I work on font size, line height, and characters' space.

  • Consider using rem for sizing instead of px. Take a look at these two videos: link1 and link2

  • You haven't used the h1 tag, which is essential for assistive technologies. For more information, please refer to the following resources: using-h1-tag

  • Use a meaningful name for the alt attribute in img tags. In all images, you have used "pp". you know if the image does not load, this text will show.

  Happy Coding! 🙌

  Marked as helpful

  1

  ---

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @mahdicodes1

  Thank you very much, I would check out the links

  0
• 

  Rino•340

  @Rhinozer0sPosted over 1 year ago

  Hey @Ferabel,

  I'm back and identified your gap-problem. You gave every box a specific width. Remove that and give your parent container a max-width (for example 65rem). Now every box take the given space which is provided by the columns.

  This should fix it ✌️

  Marked as helpful

  1
• 

  Salah Shadoud•240

  @SalahShadoudPosted over 1 year ago

  Hey There! Nice Work Done Here i have some notes that i hope it will fix all of your proplems:

  • for the centering issue, u can use min-height: 100vh; on the body element, then wrap ur HTML code with a container <div class="container"></div> ----- as setting the body element to display: flex or grid is not a good practice ----- and give it the whole height of the page then give it a display of flex or and center content inside of it like this:

  height: 100vh;
  
  //center with flex
  display: flex;
  justify-content: center;
  align-items: center;
  
  //center with grid
  display: grid;
  place-content: center; //it will center elements by the y-axis and x-axis
  

  • for resizing boxes, i recommend u to set the boxes sizes in the grid-column-templet property by setting a fixed size instead of giving the 3 columns auto so the boxes will take their widths form the grid instead of taking it from the width property.

  • for the gap issue, u should use the grid gap property grid-gap: rows-gap | columns-gap instead of using the gap property.

  Hope this will fix all of ur issues and Happy Coding <3

  Marked as helpful

  1

  ---

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @SalahShadoud thank you very much.it has been adjusted

  1
• 

  Rino•340

  @Rhinozer0sPosted over 1 year ago

  Hey, i can fix your centering issue.

  Use the min-height property for the body and center the minibody with place content This sould look like this:

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

  with min-height: 100vh; you can be sure that the body always has at least the height of the browser window. You can implement it in every project before you start styling.

  and what strikes me is that you created the columns of the minibody with auto. Instead of this you can use the fr Unit. This allows you to divide the available space into as many equal sections as you like. You can read read more about this here: https://css-tricks.com/introduction-fr-css-unit/

  If you have specific questions feel free to reach me out 🤝

  Marked as helpful

  1

  ---

  

  Rino•340

  @Rhinozer0sPosted over 1 year ago

  @Rhinozer0s

  I will solve your problem with the gap tonight after work 😉

  0

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @Rhinozer0s thank you very much.it has been adjusted

  0

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @Rhinozer0s ok kindly do

  0
• 

  Paks•1,350

  @LifeofPaksPosted over 1 year ago

  Hey Buddy🙌🏽,

  Fantastic job👍🏽. I see you still find it difficult to center a div, don't worry the confusion is normal, you'll def get better with more practice.

  How to perfectly center a div

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

  I hope this is helpful, stay consistent, focus and don't skip fundamentals

  Cheers Mate🫡

  Marked as helpful

  1

  ---

  

  Ferabel•50

  @FerabelPosted over 1 year ago

  @LifeofPaks thank you very much.it has been adjusted but how were you able to get the exact size of the design

  0