Dynamic Text Size based on device type in SAP Build Apps

[sengupta01]

HI All,

I am currently working on a project in SAP Build Apps and have encountered an issue that I need your assistance with. Here’s a brief overview of the problem:

**Issue:**

I have a “Title” component in my application for which I have applied a style. Specifically, I have set the text size to "Header 1" using a dropdown in the style settings. While this size is perfect for desktop browsers, it appears too large on mobile browsers. I would like to dynamically change the text size to "Header 2" when the application is running on a mobile browser and revert it back to "Header 1" when it is on a desktop browser.

**Requirement:**

- On mobile browsers: Text size should change to "Header 2".

- On desktop browsers: Text size should remain as "Header 1".

Could you please guide me on how to achieve this dynamic adjustment based on the device type?

[Dan_Wroblewski · Accepted solution]

You could edit the style for the title, then open the Text Size area.

For the Font size, change the binding type to a Formula, and use a formula like this:

IF(systemVars.runtime == "web",theme.$textSize_title_3XL.fontSize,theme.$textSize_text_S.fontSize)

I'm not an expert on theming, so the values to set might be slightly different, but I started with the value that was already set and changed it to a different size under the "theme" object.

[sengupta01 · Accepted solution]

Hi Dan,

Thanks for your response!!

The system variable does not work, neither on desktop browser nor on mobile browser. 

"systemVars.runtime".

[sengupta01 · Accepted solution]

Hi Dan,

[sengupta01 · Accepted solution]

Hi Dan,