Responsive Product Preview using HTML and CSS

Community feedback

• 

  Anmol Singh Tuteja•190

  @anmolthedeveloper

  Posted about 2 years ago

  Hello, Congratulations on completing this challenge

  I suspect that the image is not response, you're using the desktop image only so, here a small tip to help you make it responsive

  You can use the <picture> tag which is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:

  <picture>
  <source media="(max-width: 768px)" srcset="small-image.jpg">
  <source media="(min-width: 769px)" srcset="large-image.jpg">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  Here's a detailed reference: here

  20

  Marked as helpful
• 

  SudodoSu•210

  @SudodoSu

  Posted about 2 years ago

  Hello Coder! 👋

  Congratulations on successfully completing the challenge! 🎉

  To create a two-column layout using flexbox, I would recommend the following approach:

  • Create two boxes using the <div> element: one for the left column and another for the right column.

  <div class="left-box">
  </div>
  
  <div class="right-box">
  </div>
  

  • Replace the <div> element with a <main> element, which will serve as the main container for the layout.

  • Apply CSS styles to achieve the desired layout using flexbox. Here's an example:

  .container {
  display: flex;
  }
  
  .left-box {
  /* Styles for the left box */
  }
  
  .right-box {
  /* Styles for the right box */
  }
  

  By setting the display property of the container to flex, the child elements (left-box and right-box) will automatically arrange themselves in a row.

  I hope you find this explanation helpful. Happy coding! 😄

  00

  Marked as helpful