Using all of page width

Hi,
How should I change the custom css to make sure that the page area is adjusted to the whole width of the logseq window?

I think the following might be what you are after. Adjust 1000px to whatever width you would like

:root {
--ls-main-content-max-width: 1000px;
}
1 Like

Before using the suggested CSS, did you try the wide mode?

The shortcut (works when you are not editing any block) is:

t w

it stands for Toogle Wide mode.

16 Likes

For some reason I couldn’t make this work. Copied and pasted on the custom.css but nothing changed even if I adjusted the XXXXpx to other values.

Also is it possible to do 95% of current width of the window vs nominal values?

This is definitely helpful but would be great to have more granular control :slight_smile:

Hi Nottakumasato,

Only thing I initially thought was maybe to look throughout your css file for another instance of : root {} and place it within there with the rest of things. If you just copied and pasted you may have two : root

In terms of your relative width question, I believe that you could play with

--ls-main-content-max-width-wide: 100%;

however 100% is the default as per the Github repo so not sure how much luck you would have with making it wider than it ships by default.

1 Like

Weird. I am using the default Logseq theme:


And my custom.css looks like:
image
However still can’t get it to adjust the width. Anyways “t w” is good enough for now :slight_smile:

1 Like

Awesome, do you want to flag @alex0’s comment as the solution then? May help others that stumble upon this to quickly find the answer that helped you best.

Try without the space between : and root:

:root {
--ls-main-content-max-width: 1000px;
}

It works for me. Also it’s convenient to edit the custom.css file with an external editor because the Logseq integrated one doesn’t save invalid CSS without notice, making you think the CSS applied while it doesn’t.

2 Likes

I guess there is another implicit limit to the width somewhere since when I do 10000px:
image
and open up logseq on my widescreen:


there are still areas not used.

Thanks for this pragmatic hint. Wasn’t aware of it.
Is there a summary of ‘helpful toggles’ somewhere?

Open the search bar, you will see a little icon on the top right (next to the toggle “search in page”). That will show all the shortcuts.

Super duper, alex0!!

You made my day - Wasn’t aware of this

Thanks much

1 Like

out of curiosity what is the default width of logseq in css , because I personally like it and would just like to make a note of it

That worked for me to decrease the width, thanks!

Do you know how to increase the space between the blocks? I’m trying to match up Logseq to the Roam theme because the readability of Roam is vastly superior for my eyes and monitor.

Edit: I found the background color and was able to change the font size and pane width using the info on this page and peeping the Inspector.

Only issue I have now is I don’t know the correct language to change the main pane bg color and the left and right pane bg color. I also don’t know how to change the space between blocks. If anyone knows how the CSS language for those.

Is that the Mac Command icon? When I click it Logseq immediately crashes.

Error caught by UI!#error {:message "The map literal starting with :id contains 5 form(s). Map literals must contain an even number of forms.", :data {:type :reader-exception, :ex-kind :reader-error}}

Thanks, I have just tried

--ls-main-content-max-width-wide: 100%;

On logseq v.0.9.9, Linux

that works fine, notice that this is not the default configuration when you install logseq

The setting with 100% works for me if i toggle to the wide mode

I have:

:root {
--ls-main-content-max-width: 70%;
--ls-main-content-max-width-wide: 100%;
}

and works ok, I can configure bot states to whichever width I need.

The t w toggle works fine for me but I get tired of using it. Is it possible via css to have every page that uses a table be automatically toggled to full width?