Loopstudios Mobile

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!

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