Title: CSS problems inside editor
Last modified: August 17, 2018

---

# CSS problems inside editor

 *  [Ivijan-Stefan Stipic](https://wordpress.org/support/users/ivijanstefan/)
 * (@ivijanstefan)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/css-problems-inside-editor/)
 * Hi Guys,
 * I find a problems where CSS from other plugins messup with the kirki CSS and 
   broke editor.
 * One woocommerce addon is great example “Amazon Woocommerce fullfilment” what 
   broke `.switch` button. I made some CSS updates in the Kirki but is better to
   you know about it.
 *     ```
         .customize-control-kirki-switch .switch {
           border: none !important;
           margin-bottom: 1.5rem !important;
           outline: 0 !important;
           padding: 0 !important;
           width: 100% !important;
           height: inherit !important;
           user-select: none !important;
           border-radius: 3rem !important; }
   
       .customize-control-kirki-toggle .switch {
           border: 1px solid #b4b9be !important;
           display: inline-block !important;
           width: 35px !important;
           height: 12px !important;
           border-radius: 8px !important;
           background: #b4b9be !important;
           vertical-align: middle !important;
           position: relative !important;
           top: 4px !important;
           cursor: pointer !important;
           user-select: none !important;
           transition: background 350ms ease !important; }
           .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before {
             content: "" !important;
             display: block !important;
             width: 20px !important;
             height: 20px !important;
             border-radius: 50% !important;
             position: absolute !important;
             top: 50% !important;
             left: -3px !important;
             transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease !important; }
           .customize-control-kirki-toggle .switch:before {
             background: rgba(0, 0, 0, 0.2) !important;
             transform: translate3d(0, -50%, 0) scale(0) !important; }
           .customize-control-kirki-toggle .switch:after {
             background: #999 !important;
             border: 1px solid rgba(0, 0, 0, 0.1) !important;
             transform: translate3d(0, -50%, 0) !important; }
           .customize-control-kirki-toggle .switch:active:before {
             transform: translate3d(0, -50%, 0) scale(3) !important; }
         .customize-control-kirki-toggle input:checked + .switch:before {
           background: rgba(0, 115, 170, 0.075) !important;
           transform: translate3d(100%, -50%, 0) scale(1) !important; }
         .customize-control-kirki-toggle input:checked + .switch:after {
           background: #0073aa !important;
           transform: translate3d(100%, -50%, 0) !important; }
         .customize-control-kirki-toggle input:checked + .switch:active:before {
           background: rgba(0, 115, 170, 0.075) !important;
           transform: translate3d(100%, -50%, 0) scale(3) !important; }
       ```
   
 * Generaly I put `!important` on all CSS rules and fix problem but can be messy
   in the next updates.
 * Thanks!

The topic ‘CSS problems inside editor’ is closed to new replies.

 * ![](https://ps.w.org/kirki/assets/icon-256x256.jpg?rev=3518366)
 * [Kirki – Freeform Page Builder, Website Builder & Customizer](https://wordpress.org/plugins/kirki/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kirki/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kirki/)
 * [Active Topics](https://wordpress.org/support/plugin/kirki/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kirki/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kirki/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [Ivijan-Stefan Stipic](https://wordpress.org/support/users/ivijanstefan/)
 * Last activity: [7 years, 9 months ago](https://wordpress.org/support/topic/css-problems-inside-editor/)
 * Status: not resolved