Design responsivo na aplicação SAPUI5 - css, xml, responsive-design, sapui5

Preciso que meu aplicativo SAPUI5 seja responsivo paramóvel e desktop. Eu estou enfrentando problemas com especialmente um modo de exibição. Ele consiste em dois simples GenericTiles. Um bloco não deve estar visível no celular, por isso usei a seguinte classe de estilo.

sapUiVisibleOnlyOnDesktop

Por enquanto, tudo bem. Na área de trabalho, tudo fica bem, mas no celular a margem no topo é alta. Além disso, quando eu ainda tinha as duas peças visíveis no celular, elas passavam pelo quadro e eram apenas parcialmente visíveis (então a margem não é o único problema). Eu uso alguns css:

.customFlexBoxHome {
margin-top: 240px;
}

.customTile {
margin-left: 35px;
margin-right: 35px;
}

.customHomeBackground {
background-image: url("../images/oldtimer.jpg");
}

E esta é a minha opinião:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="com.sap.build.standard.test.controller.Home" xmlns="sap.m">
<Page class="customHomeBackground" showHeader="true" title="Home" showFooter="true">
<content>
<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center">
<GenericTile class="customTile sapUiVisibleOnlyOnDesktop" header="Tile1" subheader="" frameType="Auto" press="_onGenericTilePress">
<TileContent>
<ImageContent src="sap-icon://create-form" />
</TileContent>
</GenericTile>
<GenericTile class="customTile" header="Tile2" subheader="" frameType="OneByOne" press="_onGenericTilePress1">
<TileContent>
<ImageContent src="sap-icon://bar-code" />
</TileContent>
</GenericTile>
</FlexBox>
</content>
<footer/>
<headerContent/>
<subHeader/>
<customHeader/>
</Page>

O que posso fazer para adicionar responsividade ao meu aplicativo?

Respostas:

1. Adicione consultas de mídia para que os smartphones usem outras margens além dos desktops, por exemplo,

@media screen and (max-height: 768px) {

.customFlexBoxHome {
margin-top: 50px;
}

}

2. Adapte o FlexBox para

<FlexBox class="customFlexBoxHome" justifyContent="Center" alignItems="Center" wrap="Wrap">

O atributo wrap faz com que seja multilinha, o GenericTile em si é responsivo.

Espero que isto ajude!