Dynamic Media Viewer Presets not responsive in Adobe Experience Manager

In Adobe Experience Manager Dynamic Media, Viewer Presets do not resize responsively or remain centered when the browser viewport changes. This issue can affect different Viewer Presets, such as inline zoom or flyout viewers, and may also impact popups or overlays triggered by interactive elements within the component. To fix this issue, remove fixed height and width values set on the Dynamic Media component.

Description description

Environment

Adobe Experience Manager (AEM) Dynamic Media

Issue/Symptoms

  • Dynamic Media Viewer Presets do not resize when the browser window or device viewport changes.
  • Viewer content remains centered instead of adapting to the available screen space.
  • Inline zoom and flyout Viewer Presets display responsiveness issues.
  • Popups or overlays triggered from Dynamic Media components do not resize correctly.
  • The issue occurs when fixed height and width values are configured on the Dynamic Media component.

Resolution resolution

Follow the steps below to resolve the issue:

  1. In AEM Editor, select the Dynamic Media component that isn’t resizing responsively.
  2. Open the component settings and check for any explicitly set Height and Width values (for example, Height: 600, Width: 900).
  3. Remove or clear these fixed dimension values to allow the component to use responsive sizing.
  4. Save your changes.
  5. Use the View as Published mode and resize the browser window to confirm that the Dynamic Media content resizes responsively and remains visible across different screen sizes.
  6. Repeat these steps for other Viewer Presets or Dynamic Media components as needed.
  7. For popups or overlays triggered by interactive elements, inspect the CSS positioning. If the popup doesn’t reposition or resize responsively, review the overlay’s CSS and JavaScript. If the issue persists after you remove fixed dimensions, consider opening a separate support ticket for further troubleshooting.
recommendation-more-help
experience-cloud-kcs-help-kbarticles