Stats preview card-component with HTML and CSS

Community feedback

• 

  Tereza•605

  @sirriahPosted about 3 years ago

  Hello, the css looks little bit messy to me, but I assume, that it is desktop-first.

  • the line 113 should be '@media(max-width: 375px){'
  • the .text-section in mobile view need the flex-direction: column
  • paddings in mobile view have smaller values
  • the stats part needs to be designed with flexbox too
  • the image with the overlay should be made as background image with overlay blend mode, see the documentation
  • in HTML, you should add the h1 and other headlines. It helps to assistive technologies and SEO. Look to semantic HTML.
  • You can try to use mobile-first design
  • there are more problems, but those are the biggest

  What browser do you use? I know that chrome and firefox have the developer tools, where you can inspect the html/css/js. It can really helps you.

  Marked as helpful

  2

  ---

  

  Dummy_ken•180

  @DummyKenPosted about 3 years ago

  @sirriah Hey thanks. I will fix them asap.

  0
• 

  Adrian•190

  @ohsitePosted about 3 years ago

  Hi, I think it would be easier for you not to use margins. Basically all entry point level challenges are centered, try do it like this:

  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position realative:
  }
  

  Then body element has to have 1 child only - the container that wraps the content. I've also gave it position relative, because on every challenge you ave the attribution div. Give it position:absolute and position it below the page. It will take it out of the DOM, so it wont mess your positioning.

  Try not to use pixels. For the media queries use max instead of min just as @Tereza said. I use Chrome, it has a dev tools where you can see media queries with breaking points. Try google it if you won't find it, pm me I will record my screen and show you how to do it.

  Peace and stay motivated!

  1