Responsive Grid Component with Flexbox

Community feedback

• 

  Mazen Hassan•600

  @Mazz100Posted 11 months ago

  Hi @clintt-09. Good job with finishing the project. some things I could help with is

  ** On CSS**

  • .flex which is your main tag you could add align-items:center and justify content:center to have your design in the middle.

  • Add min-height:100vh in body to maximize the content to the full viewport height.

  • You can remove the width:85% because you already have you max-width defined.

  That's all I can suggest from my end. Keep in mind you can play with the devtool and debug your code live. Hope I could help. Happy coding :)).

  Marked as helpful

  1

  ---

  

  Clinton•100

  @eghosaclintonPosted 11 months ago

  @Mazz100 Thanks for the tip.

  • I usually don't set heights for any element in my HTML because it messes with responsiveness at times...plus I follow a mobile first approach, that is why I set width to be 85% (for small screens) even with a max-width set. This avoids the main component from getting too big as the viewport grows.

  Nevertheless, thanks for the feedback!

  1

  

  Mazen Hassan•600

  @Mazz100Posted 11 months ago

  @clintt-09 You are welcome. We help each other out. Thanks for the width tip. I will experiment with it in my future projects, but in my approach to mobile layout, I usually get the maximum width desired, then add an extra all-around margin of the container to have more space around corners. I suggest you still add the minimum height to the body as well as justify and align the content so the design will be exactly in the middle. Try it, and good luck.

  0