Vuepress: Setting to increase content width in CSS

[inianv]

Which configuration should be changed to maximize the content width of the rendered markdown files? I would like to make full use of the screen width when view viewing page contents.

Creating a new index.styl file under .vuepress/styles/ did not work. I created one with a content to increase content width using a CSS property as below. Also tried setting it to 200px, which didn't work either.

.content { width: 100%; }

[PeppeL-G]

If I'm not mistaking, it's the following CSS code that limits the width:

.theme-default-content:not(.custom) {
    max-width: 740px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
}

Just override the max-width using a CSS rule with higher specificity should fix your problem, i.e.:

div.theme-default-content:not(.custom) {
    max-width: 100%;
}

[inianv]

@PeppeL-G : That solved the issue, Thanks a lot! Closing the issue

[hoghweed]

Sorry to be so ignorant, I have the same need but I don't knwo where to put such CSS rule to enlarge the content. Can you help me?

[SilverGreyStar]

@hoghweed See:

https://vuepress.vuejs.org/config/#index-styl

[hoghweed]

@hoghweed See:

https://vuepress.vuejs.org/config/#index-styl

Thanks a lot @SilverGreyStar I already tested, but applying the rule
div.theme-default-content:not(.custom) { max-width: 100%; }

to index.styl unfortunately nothing happen.

I saw in the comment above the initiator of this issue has got the same issue of me, who replied said

add just this rule

but for me it doesn't work. any suggestion?

[PeppeL-G]

It might be that you need to restart your development server (run npm run dev again, or whatever the command is) after you've made changes to .vuepress/styles/index.styl to make the changes take effect (I don't remember).

It could also be that they've changed the HTML code in the default theme, so the mentioned CSS code does no longer work.

[Kurtil]

Instead of index.styl, you can use palette.styl. It is located in the same folder : .vuepress/styles/palette.styl.

It is used "to apply simple overrides to the styling of the default preset or define some variables to use later".

In this file, just add:

$contentWidth = 100%

;)