How do I make the layouts in this view more responsive? - iphone

Question

I am working on a UI5 app and I was wondering how do I change the view so it will work on a Iphone. Currently the app just renders one card in Iphone mode and the rest of the cards are cut off. I want the Iphone to load the cards in vertical order and on a big screen (laptop, desktop) horizontal order. I am using a grid layout and I tried changing the default span but that didn't do anything.
Here is my code
<mvc:View controllerName="ariba.cso.acwws.controller.WorkingWithSupport" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" xmlns:l="sap.ui.layout" xmlns:card="sap.f.cards"
xmlns:csolib="ariba.cso.reuselibrary.controls">
<f:DynamicPage id="dynamicpage">
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="{i18n>pagetitle}"/>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<VBox>
<l:Grid containerQuery="true" defaultSpan="S1">
<HBox>
<f:Card width="385px" class="sapUiLargeMargin">
<f:header>
<card:Header title="{i18n>highlight}"/>
</f:header>
<f:content>
<VBox>
<Text text="{text>/body}" class="sapUiSmallMargin"/>
<Link text="{text>/title}" press="hilightLink" class="sapUiTinyMargin"/>
</VBox>
</f:content>
</f:Card>
<f:Card width="340px" class="sapUiLargeMargin">
<f:header>
<card:Header title="{text>/csso}"/>
</f:header>
<f:content>
<VBox>
<Link text="{text>/wgl}" press="whatgolivelink" class="sapUiTinyMargin"/>
<Link text="{text>/ssi}" press="selfServiceLink" class="sapUiTinyMargin"/>
<Link text="{text>/ssrp}" press="regPortalLink" class="sapUiTinyMargin"/>
<Link text="{text>/acss}" press="overviewLink" class="sapUiTinyMargin"/>
<Link text="{text>/sas}" press="sourcingLink" class="sapUiTinyMargin"/>
</VBox>
</f:content>
</f:Card>
<f:Card width="400px" class="sapUiLargeMargin">
<f:header>
<card:Header title="{i18n>services}"/>
</f:header>
<f:content>
<VBox>
<Label text="{i18n>cloudsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{i18n>cloudsupportpolicylink}" press="cloudLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>onpremisesupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/teops}" press="onPremiseLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>previoussupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/ces}" press="prevSuppLinkA" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{text>/tes}" press="prevSuppLinkB" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>premiumsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/ecsd}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{i18n>premiumsupportpolicylink}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>agreements}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{i18n>agreementslink}" press="agreementLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>lifecycle}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/plc}" press="lifeCycleLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>programs}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/psn}" press="programLinkA" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{text>/tcss}" press="programLinkB" class="sapUiTinyMargin" wrapping="true"/>
</VBox>
</f:content>
</f:Card>
</HBox>
</l:Grid>
<csolib:ACFooter/>
</VBox>
</f:content>
</f:DynamicPage>
</mvc:View>
The expected result is iphone or small screens the cards should load in vertical order and on big screens like laptop or desktop the cards should be horizontal.

Answer 1

As per your code you have used width and large margins for cards, which was not required. Also you have used HBox which will align the cards next to each other rather then responsive layout. Grid will take care of responsive padding/margin by itself and also modified the default span for responsiveness.
Updated code
<f:DynamicPage id="dynamicpage">
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="{i18n>pagetitle}"/>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<VBox>
<l:Grid containerQuery="true" defaultSpan="XL2 L4" class="sapUiTinyMargin">
<f:Card>
<f:header>
<card:Header title="{i18n>highlight}"/>
</f:header>
<f:content>
<VBox>
<Text text="{text>/body}" class="sapUiSmallMargin"/>
<Link text="{text>/title}" press="hilightLink" class="sapUiTinyMargin"/>
</VBox>
</f:content>
</f:Card>
<f:Card>
<f:header>
<card:Header title="{text>/csso}"/>
</f:header>
<f:content>
<VBox>
<Link text="{text>/wgl}" press="whatgolivelink" class="sapUiTinyMargin"/>
<Link text="{text>/ssi}" press="selfServiceLink" class="sapUiTinyMargin"/>
<Link text="{text>/ssrp}" press="regPortalLink" class="sapUiTinyMargin"/>
<Link text="{text>/acss}" press="overviewLink" class="sapUiTinyMargin"/>
<Link text="{text>/sas}" press="sourcingLink" class="sapUiTinyMargin"/>
</VBox>
</f:content>
</f:Card>
<f:Card>
<f:header>
<card:Header title="{i18n>services}"/>
</f:header>
<f:content>
<VBox>
<Label text="{i18n>cloudsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{i18n>cloudsupportpolicylink}" press="cloudLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>onpremisesupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/teops}" press="onPremiseLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>previoussupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/ces}" press="prevSuppLinkA" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{text>/tes}" press="prevSuppLinkB" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>premiumsupportpolicy}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/ecsd}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{i18n>premiumsupportpolicylink}" press="premiumLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>agreements}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{i18n>agreementslink}" press="agreementLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>lifecycle}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/plc}" press="lifeCycleLink" class="sapUiTinyMargin" wrapping="true"/>
<Label text="{i18n>programs}" design="Bold" class="sapUiTinyMargin"/>
<Link text="{text>/psn}" press="programLinkA" class="sapUiTinyMargin" wrapping="true"/>
<Link text="{text>/tcss}" press="programLinkB" class="sapUiTinyMargin" wrapping="true"/>
</VBox>
</f:content>
</f:Card>
</l:Grid>
<!-- <csolib:ACFooter/> -->
</VBox>
</f:content>
</f:DynamicPage>