Responsive review-card HTML CSS

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello , I have some suggestions regarding your solution :

  • I see you are trying to use semantic tags ,but you have misused the<header>, <section> and <article> . A header element doesn't go inside main, it's a separate landmark. Technically you can have headers and footers inside articles, but assistive tech users generally dislike that as it clutters up what is announced to them on the page and can be confusing when using landmarks to navigate.

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • html {font-size: 62.5%;}changing base html size. This has huge accessibility implications for those of us with different font size or zoom requirements.

  • If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.

  • Height 100vh on this is causes the content to be cut off on mobile. Change to min-height. This also allows the body to to grow taller if the content outgrows the visible page.

  • To improve the image overlay effect you should use blend modes. You can use background color , Use mix-blend mode and opacity to make it more like the design.

  Also you would never want to set the height: 24rem; of the element. Let the content inside the card element dictate the height of it .use instead min height on the image half

  Overall your solution is good, Hopefully this feedback helps.

  Overall , your solution is good, Hopefully this feedback helps.

  12

  Marked as helpful