Power BI Dashbord alignment Issue in different OS/System

[Surekha_PM]

Hi,

I have created a dashboard in Power BI and published it in ReactJS for users. But I could see that the alignment is different in different OS and systems. For example, the card and text are not showing in straight line, in others system whereas it is properly align in my system. 

How to handle this issues? Because I have to make the same changes multiple times without seeing a result.

Regards,
Surekha Prasad

[Surekha_PM]

Hi @johnbasha33,

Thank you for your response. Well, I did try to make the dashboard responsive, but the cards and icons are completly weird in Mac OS. See the image below for reference.

In Mac

In Windows (correct alignment)

It is supposed to be in the ssame line. I checked the resolution aswell but still the same issue. How can I use CSS here?

[johnbasha33]

@Surekha_PM 
focus on making the dashboard more responsive so it adapts well to different devices. Instead of using fixed sizes for elements like cards and text, try using flexible units like percentages or relative sizes, which will allow them to adjust smoothly across different screens. You can also use CSS techniques like flexbox or grid to maintain consistent alignment. Make sure to test the dashboard on different browsers and systems to catch any inconsistencies, and check for any display scaling settings that might vary between devices. By making these adjustments, you should be able to maintain a consistent layout without constantly making changes.

Did I answer your question? Mark my post as a solution! Appreciate your Kudos !!

[Surekha_PM]

Hi @johnbasha33.,

How can I use  CSS techniques like flexbox or grid? Do you have any reference video for this?

[johnbasha33]

@Surekha_PM 

• Flexbox Tutorial: CSS Flexbox Tutorial – A comprehensive guide to understanding flexbox and how to apply it.
• Grid Tutorial: CSS Grid Layout Crash Course – A detailed introduction to CSS Grid for creating responsive layouts.