Responsive web design using Flexbox

Community feedback

• 

  P

  Jeremy Helsel•670

  @JIH7Posted over 1 year ago

  Overall this looks fantastic! I think making the body a flex container and centering everything like the above commenter said will also fix some layout issues on mobile. Right now parent-container is not neatly centered on the X-axis on mobile and that same fix should take care of it.

  I'd also consider giving the text in the score span and button a user-select: none property. That'll prevent the user from highlighting it.

  The semantic HTML tag choices in this are on point. Awesome job!

  Marked as helpful

  0

  ---

  

  Hanane•120

  @HananeEL-2023Posted over 1 year ago

  @JIH7 Thank you so much

  0
• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello, @elkaabahanane

  As you can see from the screenshot the .parent-container is not centered on the page. You can center it on the page by using flex on the body like this:

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

  • We use min-height:100vh on the body because flexbox needs height to work upon and this will make sure the content is always in the center and doesn't cut off even if seen from landscape mode on devices or else if we don't specify it the component wouldn't center itself vertically.

  Some suggestions regarding best practices:

  • Instead of using div for .parent-container to represent the whole content on the page try using a tag like <main> which is more semantic and tells the search engines and assistive technologies that the content inside it is the main content of the page like this:

  <main class="parent-container"> 
     //rest of the content
  </main>
  

  • Instead of using px for font size which is an absolute unit try using rem which is a relative unit and scales well with layouts. Give this a read as it will help you to understand a lot better!

  and lastly, give yourself a pat on the back on completing the challenge! Good job!!

  Keep up the hard work and happy coding!😊

  Marked as helpful

  0

  ---

  

  Hanane•120

  @HananeEL-2023Posted over 1 year ago

  @adityaphasu Thank you so much

  1