All comments

• 

  Matthew Reed• 160

  @mreed4

  Submitted 11 months ago

  I tried to use an img tag with classes mobile and desktop that when combined with media queries would show either (a) the mobile image, or (b) the desktop image, but I was not successful. I was more successful in using CSS' background-image with background-size, such that I really only had to use one image, where the CSS magic would make the same image appear as it does in the images provided by the Challenge. The CSS magic was unintentional, so I'm lucky it worked out. Should I be using img tags, or does my solution (w/ background-image and background-size) work? Is it better to serve only a single image? If not, why not?

  

  VS Code, No Figma, Single Product Image, CSS Background, Responsive

  3

  60

  

  P

  Nohelynaid• 180

  @Nohelynaid

  Posted 11 months ago

  I think i'm getting what you were trying to do with the img, however as far a I know whatever img you put in the img tag will display by default meaning if you put both mobile and desktop images will display at the same time therefor in that case you would only have to set display none to the mobile one and in the media query, you would only need to reverse it, i mean set display none to the desktop and display block to the mobile in order for the latter to be displayed when the screen size is a mobile size.

  this was the first challenge I did and it wasn't that good with responsive layout, but recently I have done another one that has both mobile and desktop img and it was a pretty good challenge.

  Anyway, I hope it helps you!

  1