With simple portlet template modification in Arnica WebPortal, HTML content may be easily customized to be displayed differently in devices with different screen resolutions.
The first step is to generate a default portlet template:
The next step is to provide ID values to the HTML elements which should change their presentation when screen resolution changes (lines 15 and 31 in the screenshot below), and finally add CSS with media directives to specify how presentation style should be changed when screen resolution changes (lines 1...7). Note that element ID values may reference portlet identifier (oData.oPortlet.cPortletCode), which makes template compatible with multiple portlets sharing the same template on the same container page.