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...
DougS's avatar
DougS
Khoros Oracle
6 years ago

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

  • clemensw's avatar
    clemensw
    Guide
    6 years ago

    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

    • 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