huddle-landing-page-with-single-introductory-section (mobile first)

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Pierre Fraisse, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=” true” to be ignored by screen readers and to avoid redundancy and repetition.

  Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Pierre Fraisse•330

  @PierreFrsPosted about 2 years ago

  @AdrianoEscarabote Thank you Adriano ! In my code, I think all my font sizes are set in rem excepted the one I wrote in the "html" element as a "default" size, is it bad practice ?

  0

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @PierreFrs well, if you're not using it, it doesn't need to be there ahahha

  Marked as helpful

  0

  

  Pierre Fraisse•330

  @PierreFrsPosted about 2 years ago

  @AdrianoEscarabote All right I understand, the code needs to be as concise as possible, thanks a lot !

  1
• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi Pierre,

  Anchor elements (<a>) are inline elements, so margin has no effect and the layout breaks. You could also change it to display: inline-block and omit the Flex properties along with max-width: 200px;. The result would be the same.

  I hope I could shed some light on this. Happy coding. :)

  Marked as helpful

  0

  ---

  

  Pierre Fraisse•330

  @PierreFrsPosted about 2 years ago

  @dusan-b I just did that and it works perfectly, thank you. But I don't understand what is the link between "max-width" and my "Register" text beeing offseted to the right.

  0

  

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  @PierreFrs Without max-width: 200px the element has a computed width of 293px. This is because the browser adds together the specified inline (left and right) padding of 6.25em and the width of the text "Register".

  What max-width: 200px does is it overrides this computed value by not allowing the element to be wider than 200px, so it cuts off the right padding to adapt to the set value of 200px. display: flex fixes that with justify-content: center, but what actually happens is that max-width ignores the inline padding and to fix that, flexbox comes into play.

  The point is, it gets unnecessarily complicated. So, instead of:

  display: flex;
  justify-content: center;
  text-align: center;
  max-width: 200px;
  

  You could just write:

  display: inline-block;
  

  Because of the padding the text will always stay centered.

  I hope it's clear enough. :)

  Marked as helpful

  0

  

  Pierre Fraisse•330

  @PierreFrsPosted about 2 years ago

  @dusan-b It is clear, thanks again. And, if I can be insistant, why does it takes on the right padding ? Is it some kind of browser's default behavior ?

  0

  

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  @PierreFrs Yes, by default the browser paints all HTML elements on the screen from left to right and from top to bottom.

  Marked as helpful

  0