I recognized that the defined sizes in the add_theme_support array convert to inline styles (with px values, yuck!) in the editor, which breaks custom responsive font-scaling on mobile & tablet previews. But if I set the parameter "size" to "null" this won't happen and my custom sizes defined in CSS apply as expected.
Is it ok to solve it this way, or could problems arise? I don't get any error messages or anything..
That's a good question. I haven't tried this cuz i wasn't aware of this. Do the font sizes work inside the editor this way? Or are you loading a custom stylesheet into the editor to set the sizes?
If your not getting an error and if it works, i would guess it just works. But i haven't tried it myself, so i'm not totally sure! I would have to test it out to be sure.
Hoops my bad, it doesn't exactly work as desribed. The has-..-font-size classes were still present in the editor directly after setting their values to "null", but if I then wanted to change the size the classes disappear.. Seems like "size" is required for them to work..
I can, I have and it works, but the problem is that inline styles in the editor have to be overwritten with !important / inside the .editor-styles-wrapper parent class. So i really have to overwrite my own CSS with !important in a seperate stylesheet!? This feels extremely wrong considering that the styles / classes are already present and are only overwritten by the inline pixel values. Could lead to further problems in the cascade too .. My current solution is to calculate the corresponding pixel values matching my em's in CSS and then set them in editor_font_sizes to avoid unnecessary code, but this breaks mobile previews (I mostly have a smaller root font size on mobile devices).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I recognized that the defined sizes in the add_theme_support array convert to inline styles (with px values, yuck!) in the editor, which breaks custom responsive font-scaling on mobile & tablet previews. But if I set the parameter "size" to "null" this won't happen and my custom sizes defined in CSS apply as expected.
Is it ok to solve it this way, or could problems arise? I don't get any error messages or anything..
Hi Daniel,
That's a good question. I haven't tried this cuz i wasn't aware of this. Do the font sizes work inside the editor this way? Or are you loading a custom stylesheet into the editor to set the sizes?
If your not getting an error and if it works, i would guess it just works. But i haven't tried it myself, so i'm not totally sure! I would have to test it out to be sure.
Cheers
Stephan
Hoops my bad, it doesn't exactly work as desribed. The has-..-font-size classes were still present in the editor directly after setting their values to "null", but if I then wanted to change the size the classes disappear.. Seems like "size" is required for them to work..
Haha. To bad.
But i was wondering why you can't use the class names to create responsive text sizes?
I can, I have and it works, but the problem is that inline styles in the editor have to be overwritten with !important / inside the .editor-styles-wrapper parent class. So i really have to overwrite my own CSS with !important in a seperate stylesheet!? This feels extremely wrong considering that the styles / classes are already present and are only overwritten by the inline pixel values. Could lead to further problems in the cascade too .. My current solution is to calculate the corresponding pixel values matching my em's in CSS and then set them in editor_font_sizes to avoid unnecessary code, but this breaks mobile previews (I mostly have a smaller root font size on mobile devices).