CSS value for editing text in edit mode on mobile devices

Custom CSS & Theme Design
,
1

What I’m trying to do

find the css value to edit the text in preview mode on mobile devices, especially iOS iphone

Things I have tried

I have been trying to use the CSS value corresponding to the style, which seems to work on the desktop, but when I use it on iOS there is no functionality on the mobile device, especially iOS

2

Can you share what theme and CSS snippet(s) you are using? Knowing that info will help here. And by “preview mode”, you mean only Live Preview and not Reading view, correct?

Usually any snippets that work on desktop also work on mobile without much fuss if the same .css file is on the mobile device, enabled, etc. There are some exceptions, but most css is fine in my experience.

There are some mobile specific classes if you only wanted to target mobile. e.g.

.is-phone {
    --inline-title-color: var(--h1-color);
    --h1-color: var(--color-red);
    --h2-color: var(--color-orange);
    --h3-color: var(--color-yellow);
    --h4-color: var(--color-green);
    --h5-color: var(--color-blue);
    --h6-color: var(--color-purple);
}

will only change the heading colors for phone-sized devices; desktop devices won’t be affected. .is-ios { /* styles */ } works fine here as well.

1 Like
3

Thank you very much ariehen, your explanation provided me with a solution to part of my problem. I feel like there’s not much left to find a solution. What I’m really trying to do is adjust the content so that it is justified as I edit the text as I see it on the desktop. But on mobile devices I have not observed any effect of the snippet using the {.ͼ1 .cm-line and p} class. The title issue that you addressed just raised another problem, which is adjusting the title size depending on the device in use. [ios and android].
Is there a specific class for this?
Note that I’m a layman on the subject…

4

Ah ha! You stumbled upon one of the few snippets that does work on desktop and Android(?), but doesn’t work on iOS/iPadOS: text-align: justify in the editor (in Reading view it’s fine). It worked up until mobile version 1.4.4 (99), but hasn’t worked from then on. I asked the team about it a while ago on Discord and it was speculated it was CodeMirror (the editor “engine”) related, but not sure why it stopped working.

By title do you mean the inline-title at the top of notes (Settings > Appearance → Show inline title)? If so, you could try this, for example:

.is-ios .inline-title {
    font-size: 1.5em; /* can be px as well */ 
}

As far as the mobile classes go, these are the ones I know of:

  • .is-mobile { ... } ← all mobile devices
  • .is-tablet { ... } ← tablet-sized devices
  • .is-phone { ... } ← phone-sized devices
  • .is-ios { ... } ← iOS devices – maybe iPadOS as well, but I haven’t checked
  • .is-android { ... } ← in the default app.css, but I’ve never tested it
1 Like
5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.