Different page layout for mobile and desktop view

Hi clemensw,

A CSS class will be generated for each row that will include the row id, so you could include that in a CSS selector in order to show/hide certain rows. If you have a parent element set with a CSS class that indicates mobile or desktop, then you could use CSS to show/hide certain rows based on whether it's desktop or mobile.

I hope that helps!

-Doug

Hi DougS 

thank's!

Does Lithium also provide any default display properties (css-classes) that can be used? e.g. Bootstraps's ".d-sm-none .d-md-block" for "hidden only on sm" or any similar?

regards, clemensw

Hello clemensw , try with below code.

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

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

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>