Optimise visual formatting for Power BI mobile layouts - what actually works

Most Power BI reports are built on a big monitor by someone who has never looked at them on a phone. The desktop layout looks sharp. The card visuals are the right size, the bar chart has a legend, and the page navigator runs down the left-hand side. Then an executive opens the report on their phone during a flight, and the whole thing turns into a scrolling mess of tiny numbers and clipped labels.

This is one of the most common complaints we hear from Australian businesses rolling out Power BI to managers who spend their day on the road. The report is technically working. It just was not designed for a screen that is roughly the width of a playing card. Mobile layout exists to fix that, but it is easy to set up badly, and the way it inherits settings from the desktop view is not what most people expect.

This post covers how to optimise visual formatting for the mobile layout, based on what we have seen work and what still feels rough. Microsoft's documentation on the topic is thorough, and it is worth reading alongside this. Where I think the docs leave you to figure things out the hard way, I will say so.

How mobile formatting inherits from desktop

When you place a visual on the mobile layout canvas for the first time, its format settings come across from the desktop layout. Most of them stay connected. If you change the desktop title font, the mobile title font changes with it. That is useful when you want the two views to match, and a trap when you do not.

The moment you change a setting in the mobile visualisations pane, that setting disconnects from the desktop. It becomes independent. From then on, changes to the desktop version will not reach the phone, and changes on the phone will not touch the desktop. The visual shows a small icon to flag that it has been changed. This is the behaviour you want, but it means you should decide which settings you want to own on mobile before you start making changes, not halfway through.

If you want to undo your mobile changes, you have two options. You can clear the changes for one category by selecting Clear mobile changes at the bottom of that category card. Or you can select More options (the three dots) on the visual and choose Clear mobile formatting to reset the whole visual. Either way, the affected settings reconnect to the desktop and take on the current desktop values. We have seen people clear everything, lose a carefully tuned font size, and then rebuild it from memory. Clear one category at a time if you are not sure.

Size and position are the odd ones out

Here is the quirk that catches almost everyone. Size and position settings are never inherited from the desktop layout. They are always independent, and changes to them do not show the change indicator. You will not see a little flag on a visual that has been resized on mobile, which makes it hard to tell at a glance what has been touched.

This matters for two reasons. First, it means the mobile canvas has its own sizes and positions from the moment you start, so you cannot assume a visual sits where you left it on the desktop. Second, it means you have to check positions yourself. The mobile canvas has a fine grid and smart guides, which help for rough placement, but when you need precise alignment, use the position and size fields in the pane. You can multi-select several visuals and set their sizes and positions together, which is the fastest way to line up a row of cards.

Our habit is to lay out the mobile page first with size and position fields, then go back and tune the formatting inside each visual. It is a simple order of operations, and it stops you from adjusting a font size and then finding the visual has drifted out of its column.

Responsiveness is helpful until it is not

By default, most chart-type visuals are responsive. As the visual gets smaller, Power BI prioritises the data. It removes padding, moves the legend to the top, and drops elements that do not fit. This is usually the right behaviour. A bar chart on a phone that shows fewer labels but keeps the bars is more useful than one that shrinks everything into an unreadable box.

The catch is that responsiveness can override the formatting you set. If you have carefully turned off the legend and then the visual pulls it back because the space is tight, it can feel like the settings are not sticking. The fix is to turn off responsiveness on that visual. Select the visual, then in the visualisations pane go to General > Properties > Advanced options and switch off Responsive.

My honest opinion is to leave responsiveness on for charts and turn it off for anything you have tuned by hand. Turning it off everywhere means you have built a second report, and you will be maintaining two layouts for the rest of the project. Turn it on by default and only override it where the auto-adjusting gets in the way.

Make the most of the space

Phone screens reward compact design. The Microsoft examples are a good guide here, and the principles are simple.

Change the grid orientation of a visual when the desktop version does not suit a narrow screen. A page navigator that stacks vertically on the desktop often works better as a horizontal strip on the phone. The setting is in the visualisations pane, and it changes the whole layout without rebuilding anything.

Reduce font sizes. Desktop fonts are usually too large for a phone, and they take up room that the data needs. A card visual at desktop size can dominate the screen. Reduce the size, then change the display units from thousands to millions if that makes the number shorter. Both changes are quick and make a visible difference.

Toggle off elements you do not need. On a bar chart, the legend and the x-axis can often go, provided you turn on data labels so people can still read the values. We find it helps to ask, before every change, whether a phone user needs this element to understand the chart. Often the answer is no, and the data labels do the job.

Use shapes as design elements. You can change the shape of a visual in mobile layout independently of the desktop. A rectangle used as a background on the desktop can become a line that underlines a heading on the phone. It is a small thing, but it makes the mobile view look designed rather than squashed.

Slicers need their own thinking

Slicers are where mobile layouts often feel clumsy. On a desktop, a slicer is a list you scroll through. On a phone, that list takes up the whole screen. The mobile options help here. You can choose whether a reader can select one item or several. You can set the slicer to vertical, horizontal or responsive.

Responsive slicers are the most flexible, and they behave well on a phone. As you resize them, they show more or fewer options, and if you make one small enough it collapses into a filter icon on the page. The limitation is that responsive slicers must be horizontal. If your design depends on a vertical list, you will need a fixed slicer instead.

Test slicers with a real finger. A slicer that looks neat on the canvas can still be annoying to tap, especially when the options are small. Make the touch targets generous, even if it means losing a few options on the screen at once.

Test on the canvas before you publish

The mobile layout canvas is interactive. You can click buttons, use slicers and see how visuals respond without publishing the report. This is the most useful feature in the whole process, and it is underused. Build the mobile page, then click through it as a reader would. Check what happens when you select a slicer, when a filter clears, and when a visual has no data.

Some behaviour does not carry over perfectly from the desktop, and the mobile canvas has its own limitations. Check Microsoft's list of considerations before you sign off a report for executives. Do not assume a visual that works on the desktop will behave the same way on a phone.

Where this fits

Mobile layout is one of those features that looks like a cosmetic task but ends up shaping how people use the report. A manager who can check the key numbers on the train is more likely to act on them. A report that is readable on a phone gets opened more often, and that is the real measure of whether it is working.

If your organisation is rolling out Power BI to people who are rarely at a desk, it is worth planning the mobile layout alongside the desktop build rather than tacking it on at the end. Our Power BI consultants work with teams on exactly this, and our AI for business intelligence work covers the broader question of how reporting fits with decision making. Our advice is to start with the three numbers a phone user actually needs, design for those first, and then add everything else on the desktop.

Source: Microsoft Learn, "Optimize visual formatting for mobile layout" (https://learn.microsoft.com/en-us/power-bi/create-reports/power-bi-create-mobile-optimized-report-format-visuals)