Responsive Stats Preview Card design

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. The desktop layout looks fine, just a little bit shorter. For responsiveness, if you go at 900px upwards, you will notice that the site hides the content and creates horizontal scrollbar. For mobile state, it looks fine but the top part is being hidden by the screen's ceiling.

  Here are some suggestions for the site:

  • Avoid using height: 100vh on a large container like the .wrapper container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • For the image, you can use a more descriptive alt on it if you find the image meaningful. Right now, the text office is too broad on what is image's content is all about.
  • For the text-content of the site, the text-align should be set to left because right now, texts are centered.
  • For the .card__details, if you look at the content, those could be "list" of information about the company website, therefore you can use ul` tag on it.
  • Since I suggested ul, those span would be li and also, using just a plan span to wrap a content is not that great, you should always put content inside of a meaningful element.
  • Lastly, just addressing the responsiveness issue if you go around at 900 px upwards^^

  Aside from those, great job again on this one.

  11

  Marked as helpful