Mobile responsiveness

[ELIU]

We'd like to design a report and publish to a website (via iframe code). We need to make sure the Power BI report is mobile responsive for people that do NOT have a Power BI App downloaded. In other words, people who do not have the Power BI App downloaded can also view the report on our website just as the report is opened with the App (good screen layout and real estate, etc.). 

Any ideas to share? Thanks

[v-sshirivolu · Accepted solution]

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

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 

[v-sshirivolu]

Hi @ELIU ,

Just wanted to check if you had the opportunity to review the suggestion provided?

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

Thank You.

[v-menakakota]

Hi  @ELIU ,

May I ask if you have resolved this issue? If so, please mark the helpful reply and accept it as the solution. This will be helpful for other community members who have similar problems to solve it faster. 

Thank you. 

[v-sshirivolu]

Hi @ELIU ,

Just wanted to check if you had the opportunity to review the suggestion provided?

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

Thank you.

[Akash_Varuna]

Hi @ELIU This can be done by designing it with "View as Phone Layout" in Power BI Desktop to ensure a good layout. Use a responsive iframe on your website, allowing it to adapt to various screen sizes. Additionally, enabling "Fit to Width" and "Auto Size" settings in Power BI Service helps improve responsiveness.