Testimonial Grid (no RWD)

Community feedback

• 

  David Gichuru•360

  @dxiDavidPosted over 1 year ago

  Hello @WiaterKa 👋🏾

  Congrats on completing the challenge.

  To solve your centering problem, try wrapping everything in a wrapper div or main container and center it using flexbox or grid.

  body {
    background-color: hsl(210, 46%, 95%);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 1100px;
    height: 572px;
  }
  
  

  For the above code you've written, declare a min-height first then use flexbox. Please do not give the body a fixed height or width after. The auto margin is also unnecessary.

  One last thing, avoid using pixels for dimensions, font sizes, or spacing. You're better off using em or rem.

  I hope you found this helpful, happy coding🥂

  Marked as helpful

  2

  ---

  

  Kamil Wiater•230

  @WiaterKaPosted over 1 year ago

  @dxiDavid thank you for the suggestions!

  If you be so kind and explain why shouldn't I give the body a fixed height or width after and what's the meaning for the order of listing properties for a given (one) class I would be grateful :)

  The above paragraph refers to this part of your comment:

  "For the above code you've written, declare a min-height first then use flexbox. Please do not give the body a fixed height or width after. The auto margin is also unnecessary."

  Have a nice day!

  0

  

  David Gichuru•360

  @dxiDavidPosted over 1 year ago

  @WiaterKa By fixed height and width I mean declaring height and width instead of max-height and max-width.

  • setting fixed dimensions on elements means that they will always be that size no matter the width and height of the viewport (device).
  • This makes your website unresponsive and will most likely lead to writing a bunch of media queries which is something you don't really want to do.

  If you set a max-width and max-height then it will shrink with the viewport and only grow to the largest size set. An element with fixed absolute dimensions does not shrink it remains as is and may cause overflow.

  You can get away with declaring width for small elements like social media icons but still wouldn't recommend that you it.

  I hope you understand what I mean now.

  Marked as helpful

  1

  

  Kamil Wiater•230

  @WiaterKaPosted over 1 year ago

  @dxiDavid thanks, all clear now! :)

  0
• 

  HK273•530

  @HK273Posted over 1 year ago

  Good job! Liked your comments in the HTML to split up your grid sections. Quick tip for your centre issue. Use fractional units (fr) rather than percentages on your main tag (gird-template-columns)

  main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 50% 50%;
    gap: 30px;
    margin: auto;
  }
  

  For the responsive side of things, the biggest tip I can give is to approach the design as mobile first. This does take a while to get used to but once you grasp the concept, you'll be writting much less code and having a much easier time with media queries etc.

  The best way to think about it is if you just write the HTML without any styles, it will automatically be in a mobile state (everything stacked on top of each other). Then rather than worrying about positioning and gird at first you can add the design element styles to the text, containers etc.

  Then you can think about adding gird, flexbox etc. and then use a min-width media query to set the desktop styles. Check out Kevin Powells video on mobile first for a good intro to this.

  Hope this helps! Keep up the good work!

  Marked as helpful

  1

  ---

  

  Kamil Wiater•230

  @WiaterKaPosted over 1 year ago

  @HK273 huge thanks for the comments! I was trying before with wrappers to center the website but ultimately only your solution worked :))

  Thanks also for tips concerning RWD - I will use it for the future projects.

  Really appreciate your time and effort. Have a nice day and happy coding! :))

  1
• 

  P

  AlfredKonneh•140

  @AlfredKonnehPosted over 1 year ago

  @wiaterka great job. But you have to make it responsive for mobile and wider screen. Because is all the same on mobile and laptop. I believe you can achieve that by media queries.

  1