Mobile responsiveness

Hi ELIU ,

Thanks for reaching out to the Microsoft fabric community forum.

1. Use the Publish to Web (iframe) Responsively

By default, the iframe generated by "Publish to web" is not mobile responsive — it uses fixed width and height.
To make it responsive, wrap the iframe in a responsive container using CSS.

Here’s a responsive embed code snippet:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe src="https://app.powerbi.com/view?r=YOUR_EMBED_URL"
style="position: absolute; width: 100%; height: 100%; border: none;"
allowFullScreen="true"></iframe>
</div>.
 

2. Design with Phone Layout in Power BI Desktop

Before publishing:
In Power BI Desktop, go to View > Phone layout and customize the report layout for small screens.
This layout is applied when reports are viewed on mobile, even in a browser, as long as the screen is narrow.

Official Microsoft guide:

https://learn.microsoft.com/en-us/power-bi/create-reports/power-bi-create-mobile-optimized-report-mobile-layout-view?tabs=powerbi-desktop

3. Avoid Features That Don’t Work in Embed or Mobile

When building the report:

Avoid bookmarks, custom visuals, or slicers that are hard to use on small screens.
Test in mobile browsers like Safari and Chrome to confirm interaction works as expected. 

4. Test Responsiveness Regularly

Resize your browser window orUse Chrome DevTools > Mobile view to simulate how the embedded report looks on different devices.

If the response has addressed your query , please Accept it as solution and give a 'kudos' so other members can easily find it.

Best Regards,
Sreeteja.
Community Support Team