How to NOT override inline css rules

Question

I had to dequeue the style.css parent theme file and requeued a copy without the @media rule for the menu from my child folder with a priority of 11.

But now this new style is overriding inline rules.

Is there a way to override only the parent theme style but not the inline rules?

I'm customizing a wordpress premium theme, my menu was too long so i had to move the @media rule to trigger the mobile menu at 992px instead 700ishpx.

To mantain those changes when a theme update is needed I had to dequeue the style.css core file and requeued a copy without the @media rule for the menu (As I know it was the only solution, the way the mobile menu is achieved is weird (1), if you are curious let me know) from my child folder with a priority of 11, added the @media rule in customizer for furter changes in case i need less li in menu and the mobile menu now trigger at the right media width.

But now the child css is overriding inline styles, used by my theme to change the deafult color of things and who knows what else.

Is there a way to override only the css core file but not inline rules? Dequeue and requeue without priority didn't fixed my menu.

Unfortunately my support period has expired. The theme creator fixed my menu with a ticket before the periods ends, but with his solution I have to update the style.css parent theme file after every update, as I see it it's not a resolved ticket.

(1)This @media rule for the menu is a little unusual, as I understand it the menu is always mobile and @media min-width:xxxpx the menu goes desktop, thats why a simple few line of codes in an appended css file is futile.

thats the enqueue and dequeue rules i'm using

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/style.css' );
    wp_dequeue_style( 'nt-agricom-main-style');
}

Answer 1

Please see this post about including styles and scripts correctly.

As far as I can see, you are just throwing in the style.css, giving WordPress not the opportunity to decide, which stylesheet comes when.

In order to do that, you need to register your style first, then WordPress can decide according to your priority, where to place the style.css.

In your case, you may need to make use of the function wp_is_mobile().

This is not your full correct answer, but it may be helpful for you to handle the problem better and finally solve it.

<?php

    // Example of correct use
    function se_my_script_example(){
        // first, "register" the style
        wp_register_style(
           'my-style-desktop', // Handle name
           get_template_directory_uri().'/style-desktop.css'); // Path to file
        // Then later on check what kind of device is coming in
        wp_register_style(
           'my-style-mobile', // Handle name
           get_template_directory_uri().'/style-mobile.css'); // Path to file
        // Then later on
        if(wp_is_mobile()) {
            wp_enqueque_style('my-style-desktop', $deps, $version, $footer);
        } else {
            wp_enqueque_style('my-style-mobile', $deps, $version, $footer);
        }

    }
    add_action('wp_enqueque_scripts', 'se_my_script_example');