TinyMCE on frontend style not working

The answer is simple: Styles from your theme are also applied to the TinyMCE editor. This is just how CSS works, and it means that the default styles that your theme applies to standard HTML will also apply to TinyMCE, as well as any HTML classes that the editor uses that also happen to be used by your theme.

The editor in your first screenshot is the editor loaded in the back-end of WordPress, so that’s what it looks like when WordPress’ admin styles are also applied to it. It’s never going to look exactly the same as long as your theme is loading your own styles.

The only “solution” is to use the developer tools of your browser to inspect TinyMCE’s elements and see what styles from your theme are applying to them, and then either remove them or overwrite them with styles that are closer to te WordPress admin’s.

Related Posts:

  1. TinyMCE: adding CSS to format dropdown
  2. Forcing reload of editor-style.css
  3. How do i use fontawesome icons in TinyMce editor?
  4. How to add a class to ul tags created by the WordPress editor Tinymce?
  5. How can I insert HTML attributes with an existing TinyMCE button?
  6. How to make float element in tinymce
  7. WordPress stripping out BR tags, need assistance
  8. Different css rules for TinyMCE and Gutenberg while using add_editor_style()
  9. Custom styles dropdown in TinyMCE editor – not working with headings
  10. jQuery UI styles conflicting with TinyMCE dialog
  11. Show class from css in format dropdown
  12. How to add class to an html output element in tinyMCE paragraph drop down menu
  13. Add WordPress Core CSS into editor-style.css
  14. Enqueue MCE Editor CSS in admin page
  15. Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
  16. What does !important mean in CSS?
  17. How to align a
  18. Animate the overflow property
  19. Is there a color code for transparent in HTML?
  20. What does auto do in margin: 0 auto?
  21. CSS3 Transition not working
  22. CSS Invalid Property Value?
  23. CSS how to make an element fade in and then fade out?
  24. How to center vertically and horizontally a div using Bootstrap?
  25. How to word wrap text in HTML?
  26. Style disabled button with CSS
  27. Combine :after with :hover
  28. How to show tags in my tumblr theme?
  29. HTML span align center not working?
  30. Adding a blurred border in CSS
  31. Specify multiple attribute selectors in CSS
  32. How to make certain text not selectable with CSS
  33. How do I center an SVG in a div?
  34. How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?
  35. Is it possible to enqueue a raw CSS string directly from within a template file?
  36. How to dequeue a stylesheet by src, not handle?
  37. WordPress CSS head info – contents, expansions?
  38. Gutenberg Block Editor Match Admin Styles & Frontend Styles
  39. The correct way to include JavaScript and CSS in my WordPress Themes
  40. Is it possible to change the path of a css file that is registered through wp_enqueue_style()?
  41. Styling Custom Meta Boxes?
  42. Customizing wordpress to match your site theme
  43. Is it better to put CSS in additional CSS or in Child theme styles.css [closed]
  44. Adding HTML to the Header, Screws up in IE7
  45. Efficient way to edit WordPress themes
  46. Where Do I Find The Astra Default Font Family That All Text Elements Are Inheriting From? [closed]
  47. Getting page output HTML without request (for CriticalCSS, PurgeCSS)
  48. How to organize priority of plugins CSS files?
  49. Responsive Images Warping
  50. Remove margin from CSS gradient color code
  51. Unable to remove space between header and slider section in wordpress website
  52. How can I use one stylesheet for multiple sub-sites on my multi-site network?
  53. How do I apply/target CSS to a specific user role or roles?
  54. Why is this jquery / java script code not working in mobile / in devices?
  55. Seperate functions.php for part of site
  56. Internet Explorer ignore my css
  57. How can I remove the ::after CSS selector which is automaticaly appended to the_content()?
  58. Hover colour spreading out beyond submit button
  59. Some Text of website page on Iphone Safari become invisible
  60. post_class not working with css
  61. Adding CSS to Blog Posts?
  62. Where do I go to change the position of the style.css?
  63. Using PHP Increment and Conditional Statement to Alternate Loop Background
  64. wp_enqueue_media is not loading styles
  65. Remove a Style Tag from WP Theme
  66. Simple way to add custom class and ids to individual Gutenberg blocks
  67. Namespacing theme CSS
  68. cookie free subdomain and @font-face
  69. How to change the standard navigation menu color when using genesis [closed]
  70. Change class names dynamically added to html elements by wordpress
  71. Add classes + taxonomy terms to wp_list_pages() output
  72. Chat window hiding behind Twenty Eleven header
  73. CSS isn’t rendered on a post but just posted as text [closed]
  74. How would I create the same popup in css and javascript as the one in contact button on the site https://www.sublimotionibiza.com/es/main.html [closed]
  75. How to use css only H2 Tag? Site is considering website title also H2 tag and changing its style as well
  76. How to edit CSS style sheet after migrating from local
  77. WordPress footer always at the bottom of the screen-page
  78. Dequeing Parent Fontawesome Deques Parent Styles
  79. How to make jquery slider to start afresh [closed]
  80. Custom CSS based on the Author of a Post
  81. How to properly hide the div of an inline collapsible button?
  82. How to remove padding from left&right side
  83. How can we create our own formatting style?
  84. links format change “on clic”
  85. Is it better to add to style.css or create your own css when using a template?
  86. Hide Login Page Labels
  87. The placeholder text doesnt disappear
  88. Theme stylesheet not called properly on cloned website
  89. Content alignment in Twenty Fourteen Theme
  90. Extending site width according to the image size
  91. Animate.CSS with a child theme
  92. a slider menu is compromised in space
  93. Change Twenty twelve theme background color
  94. How to change header from full-width to box width
  95. Installing non-standard fonts [closed]
  96. Change sidebar product category text color (woocommerce) [closed]
  97. Suddenly, all links in #content div are not clickable, but I don’t see any z-index bug? [closed]
  98. Bullet points not showing in wordpress
  99. IOS Ventura Safari 16.3 position fixed elements goes above scroll bar
  100. Elementor Contact Form Submit button has empty class