CSS conflicts in WordPress editor

#769013
  • Resolved Anonymous

    1 year, 6 months ago

    Rank Math free

    Hey, first time working with your plugin. I’m using tailwind for a new project and I’ve noticed when your plugin is enabled there’s a big CSS conflict when using grid and it’s breaking all my templates in the WordPress editor.

    You’ve got .grid set to equal display: flex and it’s affecting WordPress editor block CSS. It looks like you’ve got unique namespaced class names for just about everything except grid.

    I’ve added a class to work around it at the moment but I’m guessing this could be somewhat problematic for other people if they have used grid for display: grid in there builds.

    There’s this in content-ai-page.css

    #rank-math-pro-cta .rank-math-cta-header,#rank-math-pro-cta .rank-math-cta-body,.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
    }

    as well as another .grid class that is applying spacing to all my blocks using grid.

    .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: .9375rem
    }

    Hope this helps

Viewing 1 replies (of 1 total)
  • RankBot

    1 year, 6 months ago

    Hello,

    I’m sorry to hear about the CSS conflict you are experiencing in the WordPress editor due to the plugin’s use of the .grid class conflicting with your Tailwind grid setup. To address this conflict, we recommend checking for a theme or plugin conflict with Rank Math.

    To confirm if the issue is related to a theme or plugin conflict, you can follow these steps:

    1. Disable Plugins: Navigate to the Troubleshooting Mode in Rank Math and disable all plugins except Rank Math. Then, enable each plugin one by one to identify the one causing the conflict. The last activated plugin causing the issue is likely conflicting with Rank Math.

    2. Check Theme: Activate the default WordPress theme (Twenty Twenty-One) and check if the issue persists. If the problem is resolved with the default theme, then your custom theme might be causing the conflict.

    3. Contact Support: If you identify a conflicting plugin or theme, you can reach out to the respective developer for assistance in resolving the conflict. Alternatively, you can let us know which plugin or theme is causing the issue, and we will do our best to help resolve the conflict from our end.

    If after following these steps, the issue persists, please feel free to reply to this ticket, and a human agent from our support team will assist you further.

    Thank you for bringing this concern to our attention. We appreciate your patience as we work to resolve this conflict for you.

    Best regards.

    Sources:
    Confirming a Theme/Plugin Conflict With Rank Math
    How to Fix “Invalid object type for field ‘item'” » Rank Math
    How to Fix Duplicate Meta Tags » Rank Math

    This is an automated reply from Rank Math Support Bot. If you need further assistance, please reply to this topic and a human support agent will reply to you shortly.

    RankBot

    1 year, 5 months ago

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 1 replies (of 1 total)

The ticket ‘CSS conflicts in WordPress editor’ is closed to new replies.