NowMobile is showing the wrong icon

[rafas_2703]

Hi everyone!

I have a record producer that I want to show an image if you are accessing desktop, but a different image if you are on Mobile App.

The problem is that is doesn't show the correct picture on mobile.

See the image:

The image I wanted to show in mobile is the one under mobile picture. The issue is that is showing the picture under picture. How can I fix this?

Thanks,

Sérgio

[Pooja Manchekar]

@rafas_2703, To display different images based on whether a user is accessing a ServiceNow record producer from a desktop or a mobile device, you can use responsive web design techniques. Specifically, you can use CSS media queries to conditionally display images based on the screen size.

Add CSS to your record producer to control the visibility of these images based on the screen size:

<style>
/* Default to show the desktop image and hide the mobile image */
.desktop-image {
display: block;
}
.mobile-image {
display: none;
}

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
.desktop-image {
display: none;
}
.mobile-image {
display: block;
}
}
</style>

If you find my response helpful, please consider marking it as the 'Accepted Solution' and giving it a 'Helpful' rating. Your feedback not only supports the community but also encourages me to continue providing valuable assistance.

Thanks,

Pooja Manchekar

[Community Alums]

Hi @rafas_2703,  I'm facing a similar issue, did you find any solution to this?