All comments

• 

  Canice• 80

  @Canice10

  Submitted over 1 year ago

  I had(have) serious issues with styling the mobile view product image for a really long time now, so I went on to use the desktop view image; in simpler words, I don't know how to use different images when making a site responsive; I'd really appreciate any help on this.

  

  product preview card using basic html and css

  3

  5

  0

  

  Kitti Horvath• 150

  @Horv-Kitty

  Posted over 1 year ago

  Hi Canice, Congratulations for your solution. :)

  For changing the images you can use the <picture> tag, for example:

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

  Read more about this here

  /Or another solution is that you can add both to the HTML page, and you can hide them in CSS.

  for example:

  HTML:

  <img src="images/image-product-desktop.jpg" class="img-desktop" />
  <img src="images/image-product-mobile.jpg" class="img-mobile" /> 
  

  CSS:

  @media (max-width: 650px) { .img-desktop { display: none; }}
  @media (min-width: 650px) { .img-mobile { display: none; }}
  

  Marked as helpful

  1
• 

  Babatunde Owolabi• 50

  @nottundeednut

  Submitted almost 2 years ago

  having issues with mobile design

  

  responsive preview page using fle and float

  1

  4

  0

  

  Kitti Horvath• 150

  @Horv-Kitty

  Posted almost 2 years ago

  Hi! There are 2 kinds of pictures inside the images folder (image-product-desktop.jpg and image-product-mobile.jpg).

  So one solution is that you can add both to the HTML page, and you can hide them in CSS.

  for example: HTML: <img src="images/image-product-desktop.jpg" class="img-desktop" /> / <img src="images/image-product-mobile.jpg" class="img-mobile" />

  CSS: @media (max-width: 450px) { .img-desktop { display: none; }} / @media (min-width: 450px) { .img-mobile { display: none; }}

  Marked as helpful

  1