Stats Preview Card using HTML and CSS

Community feedback

• 

  eagermonument81•210

  @ixtkPosted over 3 years ago

  • at about 800px, horizontal bar appears, avoid setting fixed width.
  • when resizing, the card stays the same width on both mobile and desktop and feels very fixed and not responsive
  • you need to capitalize "k" in "10k+ companies" stat section
  • displaying .info_content as flex accomplishes nothing, as it would look exactly the same width default display: block
  • instead of applying display: flex and margin-right: 3rem to .info_content, add column-gap: 3rem on parent .info.

  Don't forget to check the report

  1

  ---

  

  Pedro•60

  @Locky-BeckenPosted over 3 years ago

  @ixtk Hi, i tried to fix some of those bugs you mentioned above, but i',m stuck with the second one. Do you have any tip for solve the report remain problem.

  0

  

  eagermonument81•210

  @ixtkPosted over 3 years ago

  @Locky-Becken Remove all fixed width declarations on div#main. You should instead use max-width if you want. That way div can shrink and grow normally depending on the content size, but won't become too big.

  Since the div#main doesn't have fixed width anymore, it will span whole screen, so you need to limit it a bit to have breathing space on the sides. Add some margin to all sides of parent element that contains div#main, in this case body.

  Some additional notes:

  • at about 830px, image loses aspect ratio and stretches. Check out object-fit property to fix that
  • on mobile layout, you might see little empty space that looks like padding below the image. To get rid of it, display image as block. This way, you no longer need weird height: 98.5% on overlay div

  Happy coding!

  0
• 

  walmanjm•425

  @walmanjmPosted over 3 years ago

  it's all good , nice job, 👍

  1