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.