Anmol Singh Tuteja

Latest comments

• 

  ron-nobi•20

  @ron-nobiSubmitted almost 2 years ago

  

  Product Preview Card - try#1

  2

  70
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 2 years ago

  Hello, Congratulations on completing this challenge

  I suspect that you're using 2 image tags, here a small tip that might interest you.

  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">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  Here's a detailed reference: here

  Marked as helpful

  1
• 

  Mohamed•30

  @MohamedBenArbiSubmitted almost 2 years ago

  

  simple product preview card using flexbox

  1

  60
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 2 years ago

  Hello, Congratulations on completing this challenge

  I observed you're using css Media Query for the image section, there's another way to achieve the same.

  Using the <picture> tag 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">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  Here's a detailed reference: here

  0
• 

  Nathan Lowe•450

  @NathLoweSubmitted almost 2 years ago

  

  Product Preview Component Card using HTML and SCSS

  #itcss#sass/scss

  2

  60
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 2 years ago

  Hello, Congratulations on completing this challenge

  The <picture> tag 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">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  Here's a detailed reference: here

  0
• 

  ItVang•20

  @ItVangSubmitted almost 2 years ago

  

  Product Preview Card using HTML and CSS

  1

  50
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 2 years ago

  Hello, Congratulations on completing this challenge

  The <picture> tag 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">
  <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  Here's a detailed reference: here

  0
• 

  Dale Torres•50

  @daletorresSubmitted almost 2 years ago

  

  Responsive Product Preview using HTML and CSS

  2

  60
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 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

  Marked as helpful

  2
• 

  Fatih•30

  @mFatihGorhanSubmitted almost 2 years ago

  

  Product preview card component

  1

  70
  

  Anmol Singh Tuteja•190

  @anmolthedeveloperPosted almost 2 years ago

  Hello, Congratulations on completing this challenge

  The <picture> tag 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

  Marked as helpful

  1