PRODUCT PREVIEW CARD

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There are several problems with the given code. Here are the issues and their respective fixes:

  There is a typo in the class name "destop-img". It should be "desktop-img".

  The margin property of class ".container .text .para" is set to 15px. This should be changed to 0.

  The strike tag is deprecated and should not be used. It should be replaced with the del tag.

  The background-color property of the body is set to hsl(30, 38%, 92%). This should be changed to hsl(30, 38%, 90%) for better contrast with the text.

  In the media query for max-width:375px, the background color of the container is set to white. This should be removed to maintain consistency with the background color of the body.

  There is a missing closing tag for the container div.

  Here is the corrected code:

  *{
      margin: 0;
      padding: 0;
  }
  
  body{
      background-color: hsl(30, 38%, 90%);    
  }
  
  .container{
      display: flex;
      justify-content: center;
      width:500px;
      height: auto;
      color: white;
      position: absolute;
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%);
  }
  
  .container .img img{
      width: 100%;
  }
  
  .container .img .desktop-img{\n    width: 100%;
  }
  
  .container .img .mobile-img{
      display: none;
  }
  
  .container .text{
      background-color: white;
      color: black;
      text-align: justify;
  }
  
  .container .text .para{
      margin-left: 0;
      color: black;
      background-color: white;
  }
  
  .container .text h3{
      margin-top: 20px;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 16px;
      color: hsl(212, 21%, 14%);
  }
  
  .container .text h2{
      margin-bottom: 10px;
      width: 50%;
  }
  
  .container .text p{
      font-size: 14px;  
      margin-bottom: 15px;
      line-height: 18px;
      padding-right:30px ;
  }
  
  .container .text h1{
      color:  hsl(158, 36%, 37%);
      font-weight: bolder;
      margin-bottom: 10px;
  }
  
  del{
      font-size: 14px;
      margin-left: 10px;
  }
  
  button{
      width: 70%;
      color: white;
      padding: 10px 5px;
      border: 1px solid green;
      background-color:  hsl(158, 36%, 37%);
      border-radius: 10px;
  }
  
  @media(max-width:375px){
      .container .img .desktop-img{
          display: none;
      }
      .container .img .mobile-img{
          display: block;
      }
      .container{
          display: flex;
          flex-direction: column;
          width: 330px;
      }
      .container .text h2{
          width: 59%;
      }
      .container .text p{
          width: 90%;
      }
      button{
          margin-bottom: 15px;
          width: 90%;
      }
  }
  
  @media (max-width:390px) {
      .container .img .desktop-img{
          display: none;
      }
      .container .img .mobile-img{
          display: block;
      }
      .container{
          display: flex;
          flex-direction: column;
          width: 330px;
          background-color: white;
          border-radius: 35px;
      }
      .container .text h2{
          width: 59%;
      }
      .container .text p{
          width: 90%;
      }
      button{
          margin-bottom: 15px;
          width: 90%;
      }
  }
  
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  Marked as helpful

  0

  ---

  

  Kennytobiloba•40

  @KennytobilobaPosted over 1 year ago

  @Trueboss thanks

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

  ---

  • We don't need to use absolute to center the component both horizontally & vertically. Because using `absolute' will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .container{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
  

  ---

  • Now your component has been properly centered

  ---

  HTML 🏷️:

  • This solution lacks semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  • So fix it by replacing the <div class="container"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0

  ---

  

  Kennytobiloba•40

  @KennytobilobaPosted over 1 year ago

  Thanks for the feedback @0xAbdulKhalid

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @Kennytobiloba Glad you found it helpful ! 🤠

  0