Skip to Content

Text is not rendering based on resolution on Lumira designer?

Hello Expert,

I have a requirement to built a dashboard which should be compatible with ipad and mobile devices.

I use SVG images for some navigation on dashboard using grid component to adjust the width and height and also I'm displaying some text on top of the images.

Now the problem is, SVG images are rending on both desktop and Ipad based on device resolution but text size remains same (the text position is change b/w desktop and ipad view).

I tried to find some css coding but nothing helped.

Is there anyone faced similar issue or anyone have the solution for it?

Appreciating your help!

Thanks

Vijai Muniraj

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 16 at 10:45 AM

    Hello Vijai,

    Are you using the adaptive container? Please see this blog https://blogs.sap.com/2017/11/27/kpi-dashboard-with-lumira-2.0-demo/

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 16 at 11:50 AM

    Hi Vijai

    In the CSS - you might be able to use something like this

    /*iPad landscape oriented styles */

    @mediascreen and (device-width:768px) and (orientation:landscape){

    /*your CSS code*/

    /*eg.*/ .myColumn {visibility: hidden!important;}

    }

    And you can add additional CSS scenarios

    like

    @mediascreen and (device-width:768px) and (orientation:portrait){

    /*your CSS code*/

    }

    Br

    René

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 16 at 02:20 PM

    Did you try to set the font size in vw unit in css instead of px ?

    Add comment
    10|10000 characters needed characters exceeded