Mobile Version alternative site | Community
Skip to main content
C
cosmicthief
New Participant
February 24, 2023
Solved

Mobile Version alternative site

  • February 24, 2023
  • 4 replies
  • 907 views

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.
Best answer by Ritesh_Mittal

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

4 replies

Manu_Mathew_
Manu_Mathew_
New Participant
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.

    arunpatidar
    arunpatidar
    New Participant
    February 24, 2023

    Hi,

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

    Arun Patidar
      Ritesh_Mittal
      Ritesh_MittalAccepted solution
      New Participant
      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

        somen-sarkar
        somen-sarkar
        New Participant
        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.

         

          Terms & ConditionsAccessibility statement

          Loading footer...