Make pages bigger #1429

New Issue

OVERLORD · 2026-02-05T00:52:36+03:00

OVERLORD commented

2026-02-05 00:52:36 +03:00

Originally created by @madsmka on GitHub (Oct 30, 2019).

Is there a way to make the pages bigger in the width? Maybe a feature request or is it possible with the Custom HTML if so how?

Originally created by @madsmka on GitHub (Oct 30, 2019). Is there a way to make the pages bigger in the width? Maybe a feature request or is it possible with the Custom HTML if so how? ![image](https://user-images.githubusercontent.com/47882801/67856645-4f9bb400-fb15-11e9-8289-a37842bc6934.png)

OVERLORD closed this issue

2026-02-05 00:52:37 +03:00

OVERLORD commented

2026-02-05 00:52:40 +03:00

@philjak commented on GitHub (Oct 31, 2019):

You could put this into the custom HTML box in the settings menu, but it won't make it that much bigger.

<style type="text/css">
.tri-layout-container {
    margin-left: 18px;
    margin-right: 18px;
    grid-template-columns: 1fr 5fr 1fr;
}
</style>

@philjak commented on GitHub (Oct 31, 2019): You could put this into the custom HTML box in the settings menu, but it won't make it that much bigger. ``` <style type="text/css"> .tri-layout-container { margin-left: 18px; margin-right: 18px; grid-template-columns: 1fr 5fr 1fr; } </style> ```

OVERLORD commented

2026-02-05 00:52:42 +03:00

@KeithIT-Dev commented on GitHub (Nov 6, 2019):

I was wondering the same thing. I don't really like this new UI

@KeithIT-Dev commented on GitHub (Nov 6, 2019): I was wondering the same thing. I don't really like this new UI

OVERLORD commented

2026-02-05 00:52:45 +03:00

@zlatin commented on GitHub (Nov 7, 2019):

I think an option to hide sidebars will solve the problem.

@zlatin commented on GitHub (Nov 7, 2019): I think an option to hide sidebars will solve the problem.

OVERLORD commented

2026-02-05 00:52:48 +03:00

@KeithIT-Dev commented on GitHub (Nov 8, 2019):

The font is also an issue, the feature updates were great but the UI shouldn't have changed.

@KeithIT-Dev commented on GitHub (Nov 8, 2019): The font is also an issue, the feature updates were great but the UI shouldn't have changed.

OVERLORD commented

2026-02-05 00:52:50 +03:00

@madsmka commented on GitHub (Nov 8, 2019):

I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages.

@madsmka commented on GitHub (Nov 8, 2019): I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages.

OVERLORD commented

2026-02-05 00:52:53 +03:00

@KeithIT-Dev commented on GitHub (Nov 8, 2019):

I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages.

I agree. Hopefully it all gets addressed in a upcoming update. I'm glad my team and I was able to view the demo site before I upgraded my prod instance.

@KeithIT-Dev commented on GitHub (Nov 8, 2019): > I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages. I agree. Hopefully it all gets addressed in a upcoming update. I'm glad my team and I was able to view the demo site before I upgraded my prod instance.

OVERLORD commented

2026-02-05 00:52:55 +03:00

@ssddanbrown commented on GitHub (Nov 15, 2019):

Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after:

<style>
@media screen and (min-width: 1400px) {
    .tri-layout-middle-contents {
        max-width: 1700px;
    }
}
.page-content { max-width: 1200px; }
</style>

Could be some side-effects of this and may break thus require tweaking on update.

The font is also an issue,

As in the fonts used? I don't think these have changed in a good while. A set of system fonts have been the default since 2017 at least. Or is this in regards to weighs and sizes? I specifically tried not to change the sizes of page content much to allow a smooth upgrade of user content.

the UI shouldn't have changed

The UI will evolve as required over time. When doing this redesign I tried my best to explain the goals, keep development open and gain feedback from BookStack users as can be seen here: https://github.com/BookStackApp/BookStack/pull/1153

The change has generally been well received.

Just to clarify, the page-content wide remained pretty much the same to ensure that user-content would generally be unaffected upon update & space was generally better utilised in the new design thanks to a 3-column layout instead of 2.

Hopefully it all gets addressed in a upcoming update.

It probably won't.

@ssddanbrown commented on GitHub (Nov 15, 2019): Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after: ```html <style> @media screen and (min-width: 1400px) { .tri-layout-middle-contents { max-width: 1700px; } } .page-content { max-width: 1200px; } </style> ``` Could be some side-effects of this and may break thus require tweaking on update. --- > The font is also an issue, As in the fonts used? I don't think these have changed in a good while. A set of system fonts have been the default since 2017 at least. Or is this in regards to weighs and sizes? I specifically tried not to change the sizes of page content much to allow a smooth upgrade of user content. > the UI shouldn't have changed The UI will evolve as required over time. When doing this redesign I tried my best to explain the goals, keep development open and gain feedback from BookStack users as can be seen here: https://github.com/BookStackApp/BookStack/pull/1153 The change has generally been well received. Just to clarify, the page-content wide remained pretty much the same to ensure that user-content would generally be unaffected upon update & space was generally better utilised in the new design thanks to a 3-column layout instead of 2. > Hopefully it all gets addressed in a upcoming update. It probably won't.

OVERLORD commented

2026-02-05 00:52:56 +03:00

@madsmka commented on GitHub (Nov 18, 2019):

Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after:
<style>
@media screen and (min-width: 1400px) {
    .tri-layout-middle-contents {
        max-width: 1700px;
    }
}
.page-content { max-width: 1200px; }
</style>
Could be some side-effects of this and may break thus require tweaking on update.

Yes, this is what I was looking for, thanks! :)

@madsmka commented on GitHub (Nov 18, 2019): > Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after: > > ``` > <style> > @media screen and (min-width: 1400px) { > .tri-layout-middle-contents { > max-width: 1700px; > } > } > .page-content { max-width: 1200px; } > </style> > ``` > > Could be some side-effects of this and may break thus require tweaking on update. Yes, this is what I was looking for, thanks! :)

OVERLORD commented

2026-02-05 00:52:58 +03:00

@Liandriz commented on GitHub (Dec 1, 2019):

Thanks for the CSS tip, is it even possible too to disable the right sidebar, letting it on the left all the time no matter what is the page width?
Thanks!

@Liandriz commented on GitHub (Dec 1, 2019): Thanks for the CSS tip, is it even possible too to disable the right sidebar, letting it on the left all the time no matter what is the page width? Thanks!

OVERLORD commented

2026-02-05 00:53:03 +03:00

@ssddanbrown commented on GitHub (Dec 7, 2019):

@Liandriz You could copy out the mid-screen styles and extend the range, so something like:

<style>
	@media screen and (min-width: 1000px) and (max-width: 4200px) {
		.tri-layout-container {
		    grid-template-areas:
		        "c b b"
		        "a b b"
		        ". b b";
		    grid-template-columns: 1fr 3fr;
		    grid-template-rows: min-content min-content 1fr;
		    padding-right: 24px;
		}
}
</style>

Again, Not officially supported and could cause side-effects but might get you what you want.

Since the original issue creator's problem has been addressed I'm going to go ahead and close this.

@ssddanbrown commented on GitHub (Dec 7, 2019): @Liandriz You could copy out the mid-screen styles and extend the range, so something like: ```html <style> @media screen and (min-width: 1000px) and (max-width: 4200px) { .tri-layout-container { grid-template-areas: "c b b" "a b b" ". b b"; grid-template-columns: 1fr 3fr; grid-template-rows: min-content min-content 1fr; padding-right: 24px; } } </style> ``` Again, Not officially supported and could cause side-effects but might get you what you want. --- Since the original issue creator's problem has been addressed I'm going to go ahead and close this.

OVERLORD commented

2026-02-05 00:53:08 +03:00

@PhilippRieth commented on GitHub (Nov 27, 2024):

I've thrown together some CSS and JavaScript that can be put into the "Custom HTML Head Content" -> Extra Wide Pages and Editor for selected pages | Reddit

@PhilippRieth commented on GitHub (Nov 27, 2024): I've thrown together some CSS and JavaScript that can be put into the "Custom HTML Head Content" -> [Extra Wide Pages and Editor for selected pages | Reddit ](https://www.reddit.com/r/BookStack/comments/1h0p79m/extra_wide_pages_and_editor_for_selected_pages/)

OVERLORD commented

2026-02-05 00:53:10 +03:00

@aaronolsen commented on GitHub (Nov 28, 2025):

I've written custom CSS+Javascript code that adds a button to the left sidebar to make it collapsible. Currently, it only collapses the left sidebar when the window has a two-column layout (window widths between 1001 and 1400 pixels). But you could modify the code to also collapse the sidebar when the window width is greater than 1400 pixels.

Here's what it looks like with the left sidebar expanded (button at top left).

And here's what it looks like when the left sidebar is collapsed:

You can find the code, a full explanation of how it works, and a link to a working example page at https://3danatomystudios.com/coding/bookstack-hack-dynamic-collapsible-left-sidebar/.

@aaronolsen commented on GitHub (Nov 28, 2025): I've written custom CSS+Javascript code that adds a button to the left sidebar to make it collapsible. Currently, it only collapses the left sidebar when the window has a two-column layout (window widths between 1001 and 1400 pixels). But you could modify the code to also collapse the sidebar when the window width is greater than 1400 pixels. Here's what it looks like with the left sidebar expanded (button at top left). ![Image](https://github.com/user-attachments/assets/08ab5cad-7922-4c7f-8408-884f199df7c1) And here's what it looks like when the left sidebar is collapsed: ![Image](https://github.com/user-attachments/assets/e90d2d4e-05ff-4d97-9994-43c542204471) You can find the code, a full explanation of how it works, and a link to a working example page at https://3danatomystudios.com/coding/bookstack-hack-dynamic-collapsible-left-sidebar/.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1429