Mobile Version alternative site

[cosmicthief]

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!

[somen-sarkar]

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.

[Ritesh_Mittal · Accepted solution]

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

Thanks,

Ritesh Mittal

[arunpatidar]

Hi,

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

[Manu_Mathew_]

@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.