All comments

• 

  Maxwell Muhanda•80

  @Maxino22Submitted over 1 year ago

  I found it difficult to switch images from the mobile to the desktop and I guess understanding max-width in CSS... will look at it keenly.

  

  Product Component TailwindCSS

  1

  60
  

  Vinícius Massari•210

  @ViniciusMassariPosted over 1 year ago

  Hello ! There is a tag in html named <picture> and the common use for this tag is deal with responsive images and you can use that to change the image based on screen width.

  You can learn how to use it in

  https://www.w3schools.com/tags/tag_picture.asp

  feel free to check my html code here

  <div class="product-photo">

      <picture>
        <source
          media="(min-width: 30rem)"
          srcset="./img/image-product-desktop.jpg"
        />
        <img src="./img/image-product-mobile.jpg" alt="" />
      </picture>
  

  check the use in tailwind too :) hope this helps

  Marked as helpful

  0
• 

  Abgail•10

  @Abgail-DinizSubmitted almost 2 years ago

  Tive dificuldade em realizar a responsividade do site, pois quando diminui a tela a imagem sai da div.

  

  HTML5 & CSS3

  2

  30
  

  Vinícius Massari•210

  @ViniciusMassariPosted almost 2 years ago

  Olá, o que está acontecendo com a imagem é que você colocou uma medida fixa nela, então quando o container principal encolhe muito a imagem estoura o container, geralmente o max-width para imagens usamos max-width de 100%, assim o tamanho máximo dela será de 100% tornando ela responsiva

  Marked as helpful

  1

  This comment has received 1 replyShow