Mobile first workflow using CSS Grid and Flexbox

Community feedback

• 

  Dusan•700

  @DEmanderbagPosted over 3 years ago

  Nice work with the design and the code overall. I really like the use of BEM classes for this project.

  The reason why the website is not aligning vertically is because the page is not full screen. If you check your solution in a web browser and hover over a body (or put background color on a body) element you can see that it's not a full page. To resolve that issue, you can put a min-height of 100vh on a body element.

  In your case, you can set min-height on a class "container" and because you are already using a grid you can just use also place-items: center; to align items horizontally and vertically.

  This next suggestion is more for git and GitHub in general than for this project but I think it will be helpful.

  I would also like to suggest that you put some context on your commit messages or at least what did you change on that commit. Instead of "commit update 8" you can write something like "update cards alignment", or "If applied, this commit will update getting started documentation"

  For git messages, I would suggest this article: "How to Write a Git Commit Message - Chris Beams".

  One last thing is to check again the email on Git and GitHub because looks like they are different and because of that on your GitHub it's only showing one contribution instead of 9 for today

  1

  ---

  

  Glen•45

  @chiptaylorPosted over 3 years ago

  @DEmanderbag Thank you for the comments. They are very helpful. I am looking at modifying the vh settings to set a min-height to correct the alignment issues. The Git / Github tips are greatly appreciated. I found in my Git that the email was not set - so I set it and that should be resolved. Finally, thank you for suggesting the resource for Git Commit messages. This is excellent. Thank you again for helping me!

  1

  

  Dusan•700

  @DEmanderbagPosted over 3 years ago

  @chiptaylor you're welcome it was my pleasure.

  Keep on coding ^^

  0
• 

  William Spanfelner•155

  @Will-1-AmPosted over 3 years ago

  Nice work on submitting this challenge, Glen.

  The html file has a "class" element that has been highlighted in the above report, but I think this was a typing error and it should be a "div" element?

  Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.

  The background-color set on ".btn" should be very-light-grey and not white as stated in the spec, but to be fair is very difficult to discern - I also got caught out on this one. 😅

  I really like the idea that the buttons don't loose their alignment with one another. As very small viewport width the button text does wrap to additional lines and this can be resolved by applying a min-width on the cards container.

  I hope this helps. Happy coding!

  1

  ---

  

  Glen•45

  @chiptaylorPosted over 3 years ago

  @Will-1-Am Thank you so much for the tips. Very helpful and appreciated! I fixed the typo on my div. Also, fixed the background color on the buttons. I saw that specification and just messed up the application in the CSS. Thanks again for looking my submission over and providing feedback!

  0

  

  William Spanfelner•155

  @Will-1-AmPosted over 3 years ago

  @chiptaylor I created an updated solution to keep the buttons aligned. The following links will show the results: code & live-site

  1

  

  Glen•45

  @chiptaylorPosted over 3 years ago

  @Will-1-Am Thank you. I almost went to using CSS Grid but was bull-headed and wanted to stick with Flexbox. :) Thanks for sending this.

  0