Hi everyone,
I wanted to share a custom CSS snippet that improves the Logseq mobile experience. After using Logseq on my phone for a while, I found two issues that were affecting my productivity:
- Headlines were too large by default - they needed to be smaller but still distinguishable
- Large gaps appeared when editing (3-4 lines of empty space below the editing line)
I’ve created a CSS solution that addresses both problems and wanted to share it with the community.
What This CSS Does
1. Refined Headlines
- Makes page titles and journal headlines appropriately sized (slightly larger than regular text)
- Provides consistent heading sizes across all views without overwhelming the screen
- Maintains clear distinction without the excessive size of default headlines
2. Fixed Editing Gap
- Eliminates the 3-4 lines of empty space that appear below the line you’re editing
- Makes the text editor more compact
- Allows you to see more of your content while editing
3. Mobile-Only Changes
- CSS only applies to mobile screens (under 768px width)
- Desktop experience remains unchanged
The CSS
/* Logseq Mobile Custom CSS - Smaller Bold Headlines and Fixed Editing Gaps */
/* MOBILE-ONLY STYLES */
@media (max-width: 768px) {
/* Individual page and journal page titles */
.page-title,
body.is-journal .page-title,
.journal-page .title,
.journal .title {
font-weight: 700 !important; /* Bolder than normal */
font-size: 1.25em !important; /* Just a smidge bigger than normal text */
}
/* DIRECTLY TARGET JOURNAL HOME VIEW DATES */
a[href*="journals"],
[data-ref*="journal"],
[data-path*="journal"],
[data-page*="journal"],
.content div[class*="journal"] h1,
.content div[class*="journal"] a,
.content div[id*="journal"] h1,
.content div[id*="journal"] a,
main [class*="journal"] h1,
main [id*="journal"] h1 {
font-size: 1.25em !important; /* Same size as page titles */
font-weight: 700 !important; /* Bold */
}
/* Special selector for main journal headlines */
body:not(.is-journal) main h1.journal-title,
body:not(.is-journal) main .journal-day,
body:not(.is-journal) main [class*="journal"] h1 {
font-size: 1.25em !important; /* Same size as page titles */
font-weight: 700 !important;
}
/* Block headlines (h1, h2, h3, etc.) */
.ls-block h1 {
font-weight: 700 !important;
font-size: 1.25em !important;
}
.ls-block h2 {
font-weight: 700 !important;
font-size: 1.2em !important;
}
.ls-block h3 {
font-weight: 700 !important;
font-size: 1.15em !important;
}
.ls-block h4, .ls-block h5, .ls-block h6 {
font-weight: 700 !important;
font-size: 1.1em !important;
}
/* Fix large gap when editing blocks on mobile - more aggressive version */
.editor-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.editor-inner textarea, .block-editor {
margin: 0 !important;
min-height: unset !important;
height: auto !important;
padding: 2px 0 !important;
line-height: 1.2 !important;
}
/* Reduce the gap between editing area and content */
.ls-block.edit {
margin: 0 !important;
padding: 0 !important;
}
/* Adjust the editing area's padding */
.block-editor-wrapper {
padding: 0 !important;
margin: 0 !important;
}
/* Additional fix for potential textarea expansion */
.CodeMirror-scroll, .CodeMirror {
min-height: unset !important;
height: auto !important;
padding: 0 !important;
line-height: 1.2 !important;
}
/* Further space reduction for editing area */
.edit-box {
margin: 0 !important;
padding: 0 !important;
}
/* Eliminate extra space in text area */
textarea {
margin: 0 !important;
padding: 0 !important;
min-height: 1.2em !important;
}
/* Target the specific cursor container */
.CodeMirror-lines, .CodeMirror-line {
padding: 0 !important;
margin: 0 !important;
}
}
Installation
- In Logseq, click the three dots in the top-right corner
- Go to Settings
- Navigate to “Advanced” or “Custom CSS” section
- Paste the code above
- Save and refresh
Before and After
Before applying this CSS, my mobile Logseq experience had oversized headlines that took up too much screen space, and editing was cumbersome due to the large gaps.
After applying the CSS, the headlines are more appropriately sized - still clearly distinguishable but not overwhelming the screen. The editing experience is also much smoother without those annoying gaps below the editing line.
Compatibility
This should work with most Logseq themes since it only makes minor adjustments to text size and editing spaces. The CSS is designed to target mobile devices only, so your desktop experience will remain unchanged.
Has anyone else created custom CSS tweaks for their mobile Logseq experience? I’d love to see what others have done to improve the mobile interface!