Product preview card component using Tailwindcss and NextJS and React

Community feedback

• 

  P

  Karthik suryadevara•825

  @karthik2265Posted over 2 years ago

  Hey debjit, well done

  The app looks nice.

  To modify the URL of an image, you can use JavaScript to do it. There is a method called window.matchMedia(query) which takes a media query like '(max-width: 600px)' as a string and returns object which contains information, the most important key in the object is matches which is a boolean value specifying if the query is satisfied or not.

  Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

  Thank You

  Marked as helpful

  0

  ---

  

  Debjit Biswas•50

  @debjitPosted over 2 years ago

  @karthik2265 I appreciate your response. I only wanted to use CSS and Tailwind for this. I'm using Next, which has built-in image optimization.

  1
• 

  the43rdSensei•80

  @The43rdsenseiPosted over 2 years ago

  good one bro

  you can also add two different image in your html and toggle display based on the screen you want individual image to appear

  0

  ---

  

  Debjit Biswas•50

  @debjitPosted over 2 years ago

  @The43rdsensei I appreciate your response. I only wanted to use CSS and Tailwind for this. I'm using Next, which has built-in image optimization.

  0