By default the app uses Bootstrap. I've tried using several div classes in the MainLayout.razor but the app fills the entire screen width. How can I set it to, for instance, 75% of screen width, when the app is running on a desktop (or laptop)?
Even though the default app uses Bootstrap, I believe you'd want to adjust the ".main" and ".sidebar" styles in the stylesheet. For a Blazor server-side app, the default stylesheet is located at wwwroot/css/site.css. If you needed to, you can also override bootstrap styles in the stylesheet.
I tried this:
.main {
width: 50%;
}
but that had no effect.
What I would like to avoid is getting caught in micro managing the display width. Like, setting it for the desktop but then there's tablets and phones.
That should have changed your width, unless you're not using the default layout I'm thinking of. Are you sure you aren't running into caching issues? Maybe try adding something like "?ver=2020092801" or "?ver=1.0" to the end of your stylesheet URL at Pages/_Host.cshtml.
<link href="css/site.css?ver=1.0" rel="stylesheet" />Right now I have <link href="css/site.css" rel="stylesheet" /> at the end of the <head> section of _Host.cshtml.
I doubt this is due to caching, as I'm running the app in debug.
As for the default layout, my little app is write out of the box (so to speak). Nothing fancy at all.
I recommend trying a few other style changes, like font color or something, to make sure you're seeing all your changes. I've ran into caching issues myself (especially with Edge) even when I have caching disabled in the DevTools.
I spun up a new app and changed the "flex: 1;" to "width: 50%;" and it changed it to 50% of the allotted area on my screen.
Font color works. As a test, I created a simple Blazor app. I set the width in the css file to 50% and that worked.
Just not in mine. So it's something I did.
I did set the color and that works.
So I guess I'll have to start from the beginning and see where things went wrong.
Well, I got it to work, sort of. If I add width: 75%; to the body tag in site.css:
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 75%;
}
that works but the app is now about 50% of the screen.
Additionally, I am trying to figure out how to center the app's display on the screen. Right now, it's flush left.
That's probably because you have both the html and body set to 75%. If this is what you're wanting, try placing the following above that style instead.
body {
width: 75%;
margin-left: auto;
margin-right: auto;
}Keep in mind, if you only want to apply that to desktops and large devices, you'd want to do it in the media query instead.
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
body {
width: 75%;
margin-left: auto;
margin-right: auto;
}
}