Stats Preview Card

Community feedback

• 

  hitmorecode•6,360

  @hitmorecodePosted about 1 year ago

  Nice well done. I took a look at your page and I have some suggestions this will also solve your issue.

  • The issue with media query is, because you used % for width and height. I made some changes (see below). What's commented out you can delete. Lines with ** these are the changes I've made

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      Font-size: 15px;
      background: hsl(233, 47%, 7%);
      color: white;
      font-family: 'Inter', sans-serif;
      min-height: 100vh; **
  }
  
  .container{
      display: flex;
      align-items: center;
      background: hsl(244, 38%, 16%);
  /*     width: 800px; */
  /*     height: 330px; */
      border-radius: 10px;
  /*     position: relative; */
  /*    top: 180px;*/
  }
  
  .right img{
      width: 400px; **
      border-radius: 0 10px 10px 0 ;
  }
  
  .right{
      height: 330px; **
  /*     flex: 1; */
      position: relative;
      width: 400px; **
      background-image: url("image-header-desktop.jpg"); 
      background-size: cover;
  }
  
  .right::before{
      background-color: hsla(277, 64%, 61%, 0.8); **
      mix-blend-mode: multiply; **
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  /*     z-index: 100; */
      content: "";
  }
  
  .left{
      padding: 45px;
      width: 400px; **
      height: 330px; **
  }
  
  @media (max-width:805px){ **
      .container{
          flex-direction: column-reverse;
  /*         transform: translateY(40px); */
          width: 400px; **
      }
  }
  

  Marked as helpful

  0