Simple Responsive Design

Community feedback

• 

  Sagi•120

  @ratsagiPosted 6 months ago

  Greetings Mohammed. Good job on completing the challenge!

  I have some suggestions for you to improve your solution.

  • You don't have to wrap your image with div to center it because you already did it with "main-container".
  • for qoutes there is a special tag like "blockquote" use it instead of paragraph. This helps screen readers to recognize "Front-end Developer and avid reader." this sentence is actually a quote not a paragraph.
  • in main-content you used to center vertically by using flexbox property "align-items: center" but to center horizontally you choose to use "margin: 0 auto" instead of it you could use "justify-content: center" By looking at your solution I find out the difference between them. If you use margin it automatically assigns margin to the main-content however if you use justify content it does not so I think the best way to center horizontally is justify-content for your solution. -From the responsive point of you, avoid using fixed units like px instead use rem. I noticed that you used them but try to be consistent because if you don't in small sceen sizes you notice unreadable content. I think for font-sizes clamp is not necessary just rem is enough.

  I hope you find it useful!

  Happy coding!

  1

  ---

  

  Mohammed Majd•120

  @MajdMohammedPosted 6 months ago

  @ratsagi Hello sir, Thank you so much for your feedback, it's really valuable for me.

  I noticed that everyone is advising me to not use fixed units like px. I know that it's bad because it makes content unreadable in some screen sizes. But I am wondering when should I use it and when not.

  For clamp() I was just have learned it so I was proud to use lol, but yea I noticed now that sometimes only rem is enough, especially when you calc() it with vw for better responsivity.

  0