Mkdocs-material: Full width of screen custom css

Created on 1 Dec 2017 · 5Comments · Source: squidfunk/mkdocs-material

Hi,

Love the theme, definitely the best one for use with mkdocs. Great work.

I'm trying to see if it's possible to make the theme full width, instead of the central column that you see on regular monitors.

I've tried adding custom css to modify .md-main and .md-main__inner, to remove the width, but i'm not having much luck. It seems that when i change .md-main and set width: 100%, the right sidebar is now in the middle of the central column of content.

Is there a simple way to achieve what i'm after (few lines in extra.css) or is this likely to consume lots of time getting the CSS right?

Cheers,

Source

mogthesprog

👍1

Most helpful comment

@mogthesprog I don't know if you are looking for something like that but you can try this:

@media only screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: none;
  }
  .md-sidebar--primary {
    left: 0;
  }
  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;   
  }
}

BTW: @squidfunk did you think about converting Material to Flexbox someday?

max-ci on 1 Dec 2017

👍15 ❤2

All 5 comments

Nope, that's not easily possible due to the sidebars, I'm sorry.

squidfunk on 1 Dec 2017

No worries. Thanks for the quick response!

Cheers,

mogthesprog on 1 Dec 2017

@mogthesprog I don't know if you are looking for something like that but you can try this:

@media only screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: none;
  }
  .md-sidebar--primary {
    left: 0;
  }
  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;   
  }
}

BTW: @squidfunk did you think about converting Material to Flexbox someday?

max-ci on 1 Dec 2017

👍15 ❤2

@makshh yeah probably, but it just works, so I think there's no real pain here.

squidfunk on 1 Dec 2017

@max-ci Thank you very much. This is very useful