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 layout?
Is this possible? How?

Thank you,
best regards
clemensw

  • 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>