How to hide catalog item pictures on mobile apps?

annc_
Tera Expert

Popular Services and Browse Services utilize record producers and catalog items on Service Portal. The picture took a big portion of the screen on mobile device. Is there any way to hide it on the mobile app?

"hidden-xs" works with /itsp. However, it doesn't seem to be working with /mesp.

 

1 ACCEPTED SOLUTION

Community Alums
Not applicable

The /mesp portal may use the same widget, but you have to remember that it is an instance of the widget. The portal page that is used to display the catalog item is me_sc_cat_item and is restricted from being edited due to system policy.

Even if you made a new portal page, the page route map that routes from sc_cat_item page to the me_sc_cat_item page is locked down as well for the /mesp portal.

So i think there isn't anything you can do unless you remove the picture, which isn't ideal as it would be gone from the desktop view.

Might need to put an idea in for an enhancement with ServiceNow.

View solution in original post

8 REPLIES 8

annc_
Tera Expert

I found that /mesp itself should respect to "hidden-xs". However, this class I added in Service Portal widget is not copied into /mesp. Any special steps to be taken to make the change into /mesp?

Community Alums
Not applicable

The /mesp portal may use the same widget, but you have to remember that it is an instance of the widget. The portal page that is used to display the catalog item is me_sc_cat_item and is restricted from being edited due to system policy.

Even if you made a new portal page, the page route map that routes from sc_cat_item page to the me_sc_cat_item page is locked down as well for the /mesp portal.

So i think there isn't anything you can do unless you remove the picture, which isn't ideal as it would be gone from the desktop view.

Might need to put an idea in for an enhancement with ServiceNow.

Thanks Matt!

Dani Mart_nez
Tera Expert

Go to sp_css.list and search mesp-styling-overrides.css

 

Go to bottom and use code :

.catalog-item-image {
display: none !important;
}