1

I made a small sensor application in Blazor server.

However, when I view the app on my phone, it shows these scrolling bars (I always need to pinch/zoom out my page to make the scrolling bars disappear and show the app like it should). It looks like the app is zoomed in at all times when I reload, even tho I set the viewport in _hosts file (<meta name="viewport" content="width=device-width, initial-scale=1.0"> ). Do not know if this is relevant information, but I'm also using MudBlazor in the frontend.

It makes the app unusable and unpleasant to consult because half of my dashboard is not visible.

Any ideas to what the problem could be? Thanks.

enter image description here

Collega
  • 424
  • 6
  • 12
  • 1
    If these gauges are canvas elements then you might need some additional css to make them responsive for mobile. Try this SO solution: https://stackoverflow.com/a/64053073/943435 Yet, if that doesn't work then you'll need to provide more detail about the gauge components. – Yogi May 10 '22 at 23:58

2 Answers2

1

You should wrap your container inside a layout container like MudContainer, MudStack or MudGrid. These components helps you with the responsive design with no or little CSS.

Mehmet Can Karagöz
  • 69
  • 2
1

It doesn't matter what framework you're using. At the end of the day, it all renders with either inline styles or CSS rules. If you want something to shrink with the window, then either the item or one of its parents needs its size to be set in relation to the window.

By default, Blazor has Bootstrap built in, which has a pretty good grid system that you can use for scaling. I don't use third party plugins, but as @Mehmet says, the first thing you should do is either Google or check YouTube for tutorials on how to format items in MudBlazor.

Try: https://www.youtube.com/results?search_query=mudblazor+layout

Bennyboy1973
  • 3,413
  • 2
  • 11
  • 16