Arrange changes in every device

[HFsi]

I´m having this issue, the same card config changes depending the device is vieweing, and even in the same mobile if it´s in portrait or landscape orientation
PC

Phone Landscape

Phone Portrait

[HFsi]

A detail....this happens only with the official Android App

[febalci]

It is broken also in IOS app...

[yordanov-alexandar]

A few days ago I stumbled on this problem too. And I managed to find a workaround that works for me but it might not work for you.
In my case I have four icons arranged in a square and nothing else. You need the card mod and use style similar to this:

style:
      .: |
        .datagroup foreignObject {width: 60px;height: 60px;}
        .datagroup foreignObject .icon {width: 100%; height: 100%}
        .datagroup g:nth-of-type(1) foreignObject {x:30px; y: 15px;}
        .datagroup g:nth-of-type(2) foreignObject {x:115px; y: 15px;}
        .datagroup g:nth-of-type(3) foreignObject {x:30px; y: 105px;}
        .datagroup g:nth-of-type(4) foreignObject {x:115px; y: 105px;}
        .datagroup foreignObject:nth-of-type(1) {x:30px; y: 15px;}
        .datagroup foreignObject:nth-of-type(2) {x:115px; y: 15px;}
        .datagroup foreignObject:nth-of-type(3) {x:30px; y: 105px;}
        .datagroup foreignObject:nth-of-type(4) {x:115px; y: 105px;}
      ha-icon:
        $: |
          ha-svg-icon {width: 60px !important; height: 60px !important;}

.datagroup foreignObject , .datagroup foreignObject .icon , ha-svg-icon - affect the icon size since that is also not applied. In my case I set it at 60px. A fixed size might not work for you and you might need to use em for example.
.datagroup g:nth-of-type(<x>) foreignObject affect the position of the icon in the browser where <x> is the sequential number of the icon starting with 1 as it is declared in the layout -> icons section
.datagroup foreignObject:nth-of-type(<x>) affect the position of the icon in the mobile app - <x> is the same as above.