picture tag

Community feedback

• 

  beowulf1958•1,890

  @beowulf1958

  Posted 29 days ago

  Congratulations on completing this challenge. As @thisisharsh7 said, the markup is clean and semantic, and I like the use of the picture tag.

  In addition to his suggestions you might try:

  .main{  
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20vh;
      /* center the card on the screen*/
      max-width: 40rem;
      margin: 0 auto;
  }
  
  .img{
      /* width: 50vh;
      height: 60vh; */
      max-width: 100%;
      height: auto;
  }
  
  .product-content{
      /* margin-left: 30px; */
      height: 500px;
      padding: 20px;
      background-color: white;
  }
  

  this centers the card, gives the content a white background, and makes the two sides equal. To separate the two sides, use padding instead of a margin.

  You might also want to add a hover state to the button and change its color:

  .cart:hover {
      background-color: hsl(158, 36%, 37%);
  }
  

  Keep on coding!

  00
• 

  Harsh Kumar•3,370

  @thisisharsh7

  Posted 29 days ago

  Thank you for sharing your project! Your structure is clean and semantic, and you’ve used the <picture> element well for responsive images.

  Here are a few suggestions to improve your code and responsiveness:

  1. Button Text Color: The button text isn’t very visible due to the dark background. Consider setting the text color explicitly to white (color: #fff;) in your .cart class to improve readability.

  2. Responsive Layout: Currently, your layout is fixed with widths in vh units, which may not adapt well to different screen sizes. Try using relative units like % or rem and implement media queries to adjust the layout on smaller devices.

  3. Image Sizing: The image uses fixed width and height in viewport height units (vh), which can cause distortion or overflow on some devices. Using max-width: 100%; and height: auto; would maintain aspect ratio and keep it responsive.

  4. Text Width and Line Height: Some text blocks have fixed widths in vh units and line heights that could be optimized for readability across devices. Again, responsive units and media queries can help here.

  Hope this helps! Happy coding! 💻✨

  00