Skip to main content
cosmicthief
Level 2
February 24, 2023
Solved

Mobile Version alternative site

Hi,


For responsiveness on my AEM site, I would like to use a different experience fragment as my footer i.e. my desktop and mobile versions are going to have different experience fragment footers.

 

Is this possible? Or is there a way to have a different footer in my mobile version than my desktop version?

 

Thanks

 

 

@kautuk_sahni @BrianKasingli @arunpatidar @DEBAL_DAS @SantoshSai 

 

Thank you!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Ritesh_Mittal
Ritesh_MittalAccepted solution
Adobe Champion and Community Advisor
February 24, 2023

Hi @cosmicthief ,

 

One way would be to create a custom container components with test condition of view port and then configuring different Experience Fragment inside them. Inside Sling Model you can return the mobile flag.

 

<sly data-sly-test.isMobile="${main.isMobile}">

// Add mobile EF to parsys

</sly>

 

<sly data-sly-test.isMobile !="${main.isMobile}">

// Add Desktop EF to parsys

</sly>

 

Please check below thread-

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/screen-width-sightly-htl/m-p/308520

 

Thanks,

Ritesh Mittal

View in thread

4 replies

somen-sarkar
Community Advisor
somen-sarkarCommunity Advisor
Community Advisor
February 24, 2023

Hi, 

Lets say in mobile version you do not want to show a component like "copyright" section which is visible in desktop version. Then you can hide the copyright component for mobile viewport . Hope that helps. 

 

 

Thank you.

 

Translate
    Ritesh_Mittal
    Adobe Champion and Community Advisor
    Ritesh_MittalAdobe Champion and Community AdvisorAccepted solution
    Adobe Champion and Community Advisor
    February 24, 2023

    Hi @cosmicthief ,

     

    One way would be to create a custom container components with test condition of view port and then configuring different Experience Fragment inside them. Inside Sling Model you can return the mobile flag.

     

    <sly data-sly-test.isMobile="${main.isMobile}">

    // Add mobile EF to parsys

    </sly>

     

    <sly data-sly-test.isMobile !="${main.isMobile}">

    // Add Desktop EF to parsys

    </sly>

     

    Please check below thread-

    https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/screen-width-sightly-htl/m-p/308520

     

    Thanks,

    Ritesh Mittal

    Translate
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      February 24, 2023

      Hi,

      Use responsive design with media query to show hide sections based on media width.

      Translate
      Arun Patidar
        Manu_Mathew_
        Community Advisor
        Manu_Mathew_Community Advisor
        Community Advisor
        February 24, 2023

        @cosmicthief  Its definitely possible to have different views - 

        You could even have it handled in the UI written in such a way that it acts differently to different viewports via CSS(media query) or have a data-sly-test condition to load different HTML/templates/experience fragments and clientlibs accordingly.

        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...