Selection of right Experience Fragment

@nsvsrk 

AEM does not automatically create separate Experience Fragments for each viewport. Instead:

• You create one Experience Fragment that is responsive.
• The responsiveness is handled by the components used within the XF, typically using CSS media queries, responsive grids, or layout containers

In case , you created separate XF variants , then use custom logic in your page templates or components to include the right one based on device detection.

Out of the box, AEM does not automatically deliver different Experience Fragment (XF) variants based on viewport size. An XF is essentially a set of authored components that you can render on a page, but AEM won’t decide which one to serve depending on device type.

If you need different versions for desktop, tablet, and mobile, a common approach is:

1. Author multiple XF variations (e.g., desktop, tablet, mobile).
2. In your component dialog (Touch UI), provide Pathfields where authors can select the XF variant for each device type.
3. In your HTL (Sightly) component, include all three XF variants on the page; these XFs are server side rendered on the page.
   <div class="cmp-customxf__desktop" data-sly-resource="${@path=model.desktopXf, selectors='content', wcmmode='disabled'}"></div> <div class="cmp-customxf__tablet" data-sly-resource="${@path=model.tabletXf, selectors='content', wcmmode='disabled'}"></div> <div class="cmp-customxf__mobile" data-sly-resource="${@path=model.mobileXf, selectors='content', wcmmode='disabled'}"></div>​
4. Use CSS media queries (e.g., @590883 rules) or client-side logic to show/hide the correct XF variant depending on the viewport.
   /* Mobile: less than 751px */ @media (max-width: 750px) { .cmp-customxf__desktop, .cmp-customxf__tablet { display: none; } .cmp-customxf__mobile { display: block; } } /* Tablet: 751px to 1199px */ @media (min-width: 751px) and (max-width: 1199px) { .cmp-customxf__desktop, .cmp-customxf__mobile { display: none; } .cmp-customxf__tablet { display: block; } } /* Desktop: 1200px and above */ @media (min-width: 1200px) { .cmp-customxf__tablet, .cmp-customxf__mobile { display: none; } .cmp-customxf__desktop { display: block; } } ​
   
   

This way, authors can manage content per device type, and the front-end ensures the correct version is displayed.

If you’d like a more dynamic solution, you could also explore personalization with ContextHub/Target, but for a straightforward viewport-based variation, the above approach is usually sufficient.