Forum Discussion

clemensw's avatar
clemensw
Guide
6 years ago

Different page layout for mobile and desktop view

Dear Community, we'd like to define a page layout where some rows are only displayed on desktop, some other only on mobile? Can we add "hide on mobile" or "hide on desktop" classes in the xml layou...
saikumarn's avatar
saikumarn
Advisor
6 years ago

Hello clemensw , try with below code.

 

<#if  !clientDevice.desktop>
    <!-- Mobile related code -->
<#else>
    <!-- Desktop related code -->
</#if>

clemensw's avatar
clemensw
Guide
6 years ago

Hi saikumarn 

thank you, but <#if !clientDevice.desktop> ... </#if> can be used in components, but not in layout definitions - right?

How can we define a row in layout defintion that is displayed on mobile or on desktop only?


Here a simple mockup example:

 

best, clemensw

  • saikumarn's avatar
    saikumarn
    Advisor
    6 years ago

    Hi clemensw 

    <#if !clientDevice.desktop> ... </#if>  --> yes , we can use this code in components only.

    Instead of using the code in layout, combine the two components in one component and use this component in your page.

    Ex :

    <#if  !clientDevice.desktop>
        <@component id="your_mobile_component_id"/>
    <#else>
       <@component id="your_desktop_component_id"/>
    </#if>