Allow content width to grow without limiting it.

[griznog]

Hi,

I have some wide content that I'd like to be able to see without scroll bars. I can get it to sort of work if I set via browser developer tools/console:

.md-content {
  min-width: 1280px;
}

as that wil make the content wide enough to display without scroll bars, but it's not dynamic and setting that in my extra css doesn't have any effect, I think because it gets overwritten after/as the page loads. What I'd bascially like to do is just allow the content section to grow so that the page always fills the browser window. Where/what would I change to allow that?

Thanks,

griznog

[kamilkrzyskow]

Hello,
to stretch the content area fully and dynamically, in your extra css you can set either one:

.md-main__inner.md-grid {
    max-width: initial;
}

or

.md-grid {
    max-width: initial;
}

The first one targets the inner content grid specifically, and the second targets all of them (footer and header have separate grids).
You can use both but, keep in mind that in CSS specificity matters, so .md-main__inner.md-grid will override a plain .md-grid.

If you don't want to use initial use rem values, I believe that max-width: 61rem; is the default for .md-grid.

https://squidfunk.github.io/mkdocs-material/customization/#additional-css

[griznog]

Thanks @kamilkrzyskow , this works great!

[pitosalas]

Interesting and helpful. But what I really want is a way to change the threshold when it displays the navigation as tabs vs. as a dropdown.

[squidfunk]

Unfortunately, that's not easy to change due to how browsers work:
#6785 (reply in thread)

[pitosalas]

Just to make sure: https://share.zight.com/Z4u206bZ

But if it requires a recompile, is that something I can do? Or, Is there a totally different technique I can use to present the user some kind of navigation? Maybe I am using the tool in not the best way. FYI, the site is here: https://campusrover.github.io/labnotebook2/ and the GitHub repo is public if that helps.

[squidfunk]

Yes, you need to recompile the theme. There is no parametrizable solution due to lacking browser support for @custom-media.

[squidfunk]

Related:

• Is there an option to show the hamburger left menu by default? #3210

[pitosalas]

Wonderful. Well I am fine with recompiling. In fact I have followed the "customization" instructions. I am up to the point of :

As I read further in the many threads it is still uncertain whether this will work. I saw somewhere that said that additional js changes might be needed. Also I notice in _config.scss:

Which is where I think I need to change. But I am not sure which I have to change, for example what is small, medium, large and why are there to em's included for each.

Can you give me a specific instruction on how to modify this file; and whether that would be sufficient to achieve what I would like?