Image button for Desktop and mobile

Phoenix Forum Questions / Help
,
1

Hello All,

I have below queries to ask if someone can resolve this.
I need to create button with image on it in phoenix project for desktop as well as mobile app.
my main query is that can we set different button image for same funtion.so if one image set for desktop it will reflect there and another image for mobile app it should reflect there
if it is possible let me know how.

2

This is not really a Phoenix issue, but rather a HTML/CSS one, so the solution is not specific to Phoenix.

You have a few options, depending on how you want to distinguish between mobile and desktop. If it is ok to distinguish them by screen size, I would use the <picture> HTML element:

<button>
  <picture>
    <source srcset="image-for-large-screen.png" media="(min-width: 500px)">
    <img srcset="image-for-small-screen.png" alt="alt text">
  </picture>
</button>

You can see this technique in action here (resize the screen to see the image change).

More generally, you can use CSS media queries to apply different CSS rules to different screen sizes.

Here you can find various techniques for responsive images explained and evaluated.

3 Likes