Mobile First Stats Preview Card, built with Flex and Grid

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 2 years ago

  Hi

  I'm afraid the HTML needs to change on this

  The biggest issue is with those 3 stats. Numbers like that make no sense at all as headings - what kind of content would you expect to find navigating to a title of "10k"? It's meaningless. Imagine the content in a plain document without styles. That helps with choosing the most appropriate elements. Instead those 3 stats should be a list with 3 list items

  This is a single component with text and an image. If you're going to use section, it should be wrapping all that content, including the image as it is all one component.

  A more minor issue is it is generally considered bad practice to have empty divs in html. Not only is it confusing to other developers (why is that div there) but it is also less performant serving background images like this. Instead, use the picture element. Alt can be blank to treat it as decorative, as you are doing now, but the code is clearer and the performance is way better because the browser can do it's job and pull down the correct image for the users screen

  05

  Marked as helpful
• 

  IryDev•1,580

  @IryDev

  Posted over 2 years ago

  Hi, well done for your solution !

  I have a little suggestion to improve your solution :

  The image on the right is not properly centered when the window changes of size.

  You can apply those properties especially background-position:center to make it properly centered.

  .card__image{
  background-image: url(./images/image-header-desktop.jpg);
  background-position: center;
  background-size: cover;
  }
  

  Finally I hope you'll find this helpful and your solution is really good

  01

  Marked as helpful