Loopstudios Mobile

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Bryan,

  You can achieve that using <picture> element tag.

  Instead of

  <img src="/static/media/some-image.png" alt="creations card">
  

  You can use this:

  <picture>
    <source media="(min-width:768px)" srcset="/static/media/desktop-image.png">
    <img src="/static/media/mobile-image.png" alt="creations card">
  </picture>
  

  You can add more than one <source> element if you want several breakpoints.

  "The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches." (HTML Tag Pictures)

  Hope this helps. Happy coding!

  Marked as helpful

  0
• Account deleted

  Hey, @BryBry04 👋. Regarding your question, you can read upon the <picture> element.

  Although I noticed that you added the hero image with CSS, so you can use a media query to accomplish what you want. By the way, on bigger resolutions the image is repeating itself across the hero. To fix that, in the container you can specify:

  background-repeat: no-repeat;
  background-size: 100%;
  

  To learn more about background* properties: https://developer.mozilla.org/en-US/docs/Web/CSS/background

  0