make the content container wider when there is no sidebar

[xu4wang]

I'm using the nav to navigate and don't need the sidebar, so I disabled the sidebar.

However, the main area rendering markdown is still narrow. Is there a way to config vitepress default theme and making content container wider?

PS. There are plenty of areas wasted on my Macbook screen on both right and left side. Please refer to below picture.

[xu4wang]

Digging into the code, there is hard coded max-width inside:

https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPDoc.vue

@media (min-width: 1440px) {
  .VPDoc:not(.has-sidebar) .content {
    max-width: 784px;
  }
  .VPDoc:not(.has-sidebar) .container {
    max-width: 1104px;
  }
}

Is there an easy way I can override the two max-width? thanks..

[brc-dd]

Just increase the specificity of your selectors or use ! important, your CSS will override ours.

[xu4wang]

Sorry for the silly question.. I am not familiar with front end.

how to increase?

Shall I create a css file under /doc and import it in nuxt.config.is?

[brc-dd]

This is not Nuxt 😅. Refer this: https://vitepress.vuejs.org/guide/theme-introduction#customizing-css and add some CSS like:

/* .vitepress/theme/custom.css */
@media (min-width: 1440px) {
  .VPDoc:not(.has-sidebar) .content {
    max-width: 784px !important; /* <-- update your values */
  }
  .VPDoc:not(.has-sidebar) .container {
    max-width: 1104px !important;
  }
}

Also, might wanna give this a read: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#tips_for_handling_specificity_headaches

[xu4wang]

This is not Nuxt 😅. Refer this: https://vitepress.vuejs.org/guide/theme-introduction#customizing-css and add some CSS like:

/* .vitepress/theme/custom.css */
@media (min-width: 1440px) {
  .VPDoc:not(.has-sidebar) .content {
    max-width: 784px !important; /* <-- update your values */
  }
  .VPDoc:not(.has-sidebar) .container {
    max-width: 1104px !important;
  }
}

Also, might wanna give this a read: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#tips_for_handling_specificity_headaches

Thanks for the guide.. it's working. below is the numbers I use now. @brc-dd

/* .vitepress/theme/custom.css */

@media (min-width: 1440px) {

    .VPDoc:not(.has-sidebar) .content {
  
      max-width: 1284px !important; /* <-- update your values */
  
    }
  
    .VPDoc:not(.has-sidebar) .container {
  
      max-width: 1604px !important;
  
    }
    .VPDoc.has-aside .content-container {
        max-width: 1188px !important;
    }
  
  }