How to make button secondary image display on mobile

I have a set of buttons with a secondary image that displays on hover. What I want to do is make it so that when the website is visited on a mobile device the secondary image is what’s displayed, not the primary image. I’m not sure exactly how to do this.

Someone suggested this code to me:

@media only screen and (max-width: 600px) {.secondary-image
{opacity: 1}}

with secondary-image being the ID of the button. I know this is not correct but I’m not sure what exactly to do.

Hello @cwctroy,

Thanks for asking. :slight_smile:

If you want to show different image on mobile for same element then you can duplicate the same. You can keep one button element for desktop screens and other for mobile screen. To display button only on desktop and mobile screens please use Hide During Breakpoints feature. Here is a screencast that you can take a look.

To learn more, please take a look at following article.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.