HTML and CSS custom properties

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  This looks broken for me on mobile.

  Here are some more tips

  • don’t position relative or hide overflow hidden on body and html. Very bad things happen
  • center component on page using flex or grid properties and min height 100vh on a wrapping element / body. Do not use position relative and transform.
  • a little padding on that wrapper or margin on your component will prevent the content hitting screen edges
  • max width in rem, no width, no height on this card
  • css reset should be setting the img to display block and max-width 100%
  • you are hiding the most important content on this page for assistive tech and search engines - alt text needed on that image
  • never have font size in px, use rem
  • why is footer display none?

  Marked as helpful

  1

  ---

  

  Amira Benguega•20

  @AmiraBenguegaPosted almost 3 years ago

  @grace-snow thank you for this really informative feedback, I really appreciate it. and I'll fix the parts that you mentioned

  • the website is broken on the mobile screen because I set the width& height of the card proportional to the screen size(vw/vh) I thought this way it would be responsive without media query.
  • for the footer I just wanted to omit the attribution in it so that the page match the design, maybe I should have just removed the attribution div.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @AmiraBenguega this challenge doesn’t need a media query. Max width is all you need

  Marked as helpful

  1
• 

  sb101-beep•60

  @sb101-beepPosted almost 3 years ago

  You can probably make the .main width and height a fixed size, I don't think they need to vary on this one. Other than that looks great :-)

  Marked as helpful

  0

  ---

  

  Amira Benguega•20

  @AmiraBenguegaPosted almost 3 years ago

  @sb101-beep Thanks for the feedback!.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @sb101-beep there is no reason to use fixed height or width in this. Just a max-width.

  Setting explicit height in particular is unnecessary and either of these can introduce overflow bugs

  Marked as helpful

  1