Stats preview card HTML, CSS

Community feedback

• 

  

  Chamu•13,860

  @ChamuMutezva

  Posted over 3 years ago

  Greetings Jehan

  So far so good. Somethings need some attention includes the following

  • there is some mobile devices which have a screen width of less than 320px, using @media (min-width: 320px) will prevent such devices from properly accessing the site. Check using dev tools below 320px
  • the height of the image is 480px, setting it to a fixed height of 280px is causing it not to scale properly on medium devices. Check the image anywhere between 900px and 1280px
  • if you want the text to be centered always , remove the margin-left: 12.5% and margin-top: 2rem. Replace with a margin: 2rem auto

  .div-txt h1 {
  	margin-left: 12.5%; // remove this
  	margin-top: 2rem;   // remove this
          margin: 2rem auto; // replace with this 
  	width: 75%;
  	color: hsl(0, 0%, 100%);
  	font-size: 1.6rem;
  } ```
  
  - set the body to ` min-height: 100vh;` instead of the ` height: 100%;`
  

  01